Untitled

import PacasoComponents
import SwiftUI

struct FeedItem<Icon: View, Title: View, Content: View>: View {
	@State private var iconHeight: CGFloat = 0
	@State private var titleHeight: CGFloat = 0

	@ViewBuilder var icon: () -> Icon
	@ViewBuilder var title: () -> Title
	@ViewBuilder var content: () -> Content

	var body: some View {
		HStack(alignment: .top, spacing: 4) {
			VStack(spacing: 4) {
				icon()
					.onSizeChange { iconHeight = $0.height }

				Color.gray.frame(width: 1)
			}

			VStack(alignment: .leading, spacing: 4) {
				titleView

				content()
			}
			.frame(maxWidth: .infinity, alignment: .leading)
		}
		.fixedSize(horizontal: false, vertical: true)
	}

	@ViewBuilder
	private var titleView: some View {
		let titleOffset: CGFloat = if iconHeight > titleHeight {
			(iconHeight - titleHeight) / 2.0
		} else {
			0.0
		}

		title()
			.onSizeChange { titleHeight = $0.height }
			.offset(y: titleOffset)
	}
}

struct Timestamp: View {
	let date: String

	var body: some View {
		Text(date)
			.font(.caption2)
			.italic()
			.foregroundStyle(Color.secondary)
			.frame(maxWidth: .infinity, alignment: .trailing)
	}
}

struct FeedIcon: View {
	let systemName: String

	var body: some View {
		Image(systemName: systemName)
			.font(.callout)
	}
}

#Preview {
	VStack(alignment: .leading, spacing: 4) {
		FeedItem {
			FeedIcon(systemName: "bell.circle.fill")
				.foregroundStyle(Color.cyan)
		} title: {
			Text("This is a really long title that wraps to the next line because there are so many words")
				.font(.footnote)
		} content: {
			Timestamp(date: "Apr 23, 12 AM")
		}

		FeedItem {
			FeedIcon(systemName: "person.circle.fill")
				.foregroundStyle(Color.orange)
		} title: {
			Text("You have a new follower!")
				.font(.footnote)
		} content: {
			Timestamp(date: "Apr 23, 12 PM")
		}

		FeedItem {
			FeedIcon(systemName: "square.and.arrow.up.circle.fill")
				.foregroundStyle(Color.blue)
		} title: {
			Text("Left Hand RS3-48 Yard Club")
				.font(.footnote)
		} content: {
			VStack(alignment: .leading, spacing: 4) {
				Text("Designed to help first-time golfers learn to hit balls, enjoy the game, and achieve quick success, it features a super-lightweight, oversized head that provides a larger hitting area for easier, more accurate shots.")
					.font(.caption2)
					.foregroundStyle(Color.white)
					.padding(4)
					.background(Color.black.clipShape(RoundedRectangle(cornerRadius: 6)))

				Timestamp(date: "Apr 17, 12 PM")
			}
		}
	}
	.padding()
	.background(Color.black.opacity(0.1))
}