import SwiftUI

/// Ein Titel im Hochformat, wie er in Bibliotheksrastern steht.
public struct PosterCard: View {
    private let title: String
    private let subtitle: String?
    private let artworkURL: URL?
    private let progress: Double?

    /// Das Seitenverhältnis von Kinoplakaten. Plex liefert Poster in diesem
    /// Format; ein anderer Wert würde die Bilder beschneiden.
    public static let aspectRatio: CGFloat = 2.0 / 3.0

    public init(title: String, subtitle: String? = nil, artworkURL: URL?, progress: Double? = nil) {
        self.title = title
        self.subtitle = subtitle
        self.artworkURL = artworkURL
        self.progress = progress
    }

    public var body: some View {
        VStack(alignment: .leading, spacing: FlaroSpacing.snug) {
            FlaroArtwork(url: artworkURL, aspectRatio: Self.aspectRatio)
                .clipShape(.rect(cornerRadius: FlaroRadius.card))
                .overlay(alignment: .bottom) {
                    if let progress {
                        WatchProgressBar(fraction: progress)
                    }
                }
                .clipShape(.rect(cornerRadius: FlaroRadius.card))

            VStack(alignment: .leading, spacing: 2) {
                Text(title)
                    .font(.flaroCardTitle)
                    .foregroundStyle(Color.flaroTextPrimary)
                    .lineLimit(1)
                if let subtitle {
                    Text(subtitle)
                        .font(.flaroCaption)
                        .foregroundStyle(Color.flaroTextMuted)
                        .lineLimit(1)
                }
            }
        }
        // Ohne diese Zusammenfassung liest VoiceOver Bild, Titel und Balken als
        // drei getrennte Elemente vor — bei einer Reihe aus zwanzig Kacheln
        // wird das Durchwischen dadurch dreimal so lang.
        .accessibilityElement(children: .combine)
    }
}