Product Card Basic Rectangle

import Foundation
import SwiftUI

struct ProductCardBasicRect: View {
    let productImage: Image
    let productName: String
    let productCategory: String
    let productPrice: Double
    @Binding var isFavorite: Bool
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            image
            VStack(alignment: .leading, spacing: 2) {
                name
                category
            }
            price
        }
    }
    
    private var image: some View {
        productImage
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 160, height: 140)
            .clipped()
            .clipShape(.rect(cornerRadius: 15, style: .continuous))
            .overlay(alignment: .topTrailing) {
                favoriteButton
                    .offset(x: -10, y: 10)
            }
    }
    
    private var favoriteButton: some View {
        Button(action: {
            isFavorite.toggle()
        }) {
            /// You can download custom symbols used in this component:
            /// custom.heart.fill: https://drive.google.com/file/d/1FrubVKYkTqG61-iAA0LVv5MnjQKx1WUI/view?usp=sharing
            /// custom.heart: https://drive.google.com/file/d/1FbTd5rpydjMYCSktub2k9N7YeKVSDMVN/view?usp=sharing
            Image(isFavorite ? "custom.heart.fill" : "custom.heart")
                .font(.system(size: 20))
                .fontWeight(.regular)
                .symbolRenderingMode(.multicolor)
        }
        .buttonStyle(PlainButtonStyle())
    }
    
    private var name: some View {
        Text(productName)
            .font(.system(size: 15))
            .fontWeight(.medium)
            .lineLimit(2)
            .padding(.top, 8)
            .foregroundStyle(.primary)
    }
    
    private var category: some View {
        Text(productCategory)
            .font(.system(size: 15))
            .fontWeight(.light)
            .lineLimit(1)
            .foregroundStyle(.secondary)
    }
    
    private var price: some View {
        HStack {
            Text(productPrice, format: .currency(code: "USD"))
                .fontWeight(.medium)
            Text("night")
                .fontWeight(.light)
                .foregroundStyle(.secondary)
        }
        .font(.system(size: 14))
        .padding(.bottom, 8)
        .foregroundStyle(.primary)
    }
}

struct UseProductCardBasicRect: View {
    
    @State private var isFavorite: Bool = false
    
    var body: some View {
        ProductCardBasicRect(productImage: Image("bellavista"), productName: "Bella Vista Hotel", productCategory: "Romantic", productPrice: 199.99, isFavorite: $isFavorite)
            .padding()
    }
}

#Preview {
    UseProductCardBasicRect()
}