Post Card

import SwiftUI

/// A full social post with image and action bar.
struct SocialPost: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack(spacing: 10) {
                Image("carPortrait").resizable().aspectRatio(contentMode: .fill).frame(width: 38, height: 38).clipShape(Circle())
                VStack(alignment: .leading, spacing: 1) { Text("maya.travels").font(.system(size: 14, weight: .semibold)); Text("San Francisco · 2h").font(.system(size: 11)).foregroundStyle(.secondary) }
                Spacer()
                Image(systemName: "ellipsis").font(.system(size: 15)).foregroundStyle(.secondary)
            }.padding(12)
            Image("carBeach").resizable().aspectRatio(contentMode: .fill).frame(width: 300, height: 220).clipped()
            HStack(spacing: 18) {
                Image(systemName: "heart").font(.system(size: 20))
                Image(systemName: "bubble.right").font(.system(size: 19))
                Image(systemName: "paperplane").font(.system(size: 19))
                Spacer()
                Image(systemName: "bookmark").font(.system(size: 19))
            }.padding(12)
            VStack(alignment: .leading, spacing: 3) {
                Text("1,240 likes").font(.system(size: 13, weight: .semibold))
                (Text("maya.travels ").font(.system(size: 13, weight: .semibold)) + Text("A perfect day at the beach. Where to next?").font(.system(size: 13)))
            }.padding(.horizontal, 12).padding(.bottom, 12)
        }
        .frame(width: 300)
        .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 18, style: .continuous))
        .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
        .overlay(RoundedRectangle(cornerRadius: 18, style: .continuous).stroke(Color.primary.opacity(0.06)))
        .shadow(color: .black.opacity(0.05), radius: 14, y: 6)
    }
}