import Elementary
import Persistence

/// What a listing looks like: its first photo, or its placeholder cover while it has none.
struct ListingImage: HTML {

    // MARK: Properties

    /// The listing shown.
    let listing: Listing

    /// A modifier class positioning or sizing the image, or `nil` for none.
    let modifier: String?

    // MARK: Initializers

    /// Creates a listing's image.
    /// - Parameters:
    ///   - listing: the listing shown.
    ///   - modifier: a modifier class positioning or sizing the image, or `nil` (the default) for none.
    init(
        _ listing: Listing,
        modifier: String? = nil
    ) {
        self.listing = listing
        self.modifier = modifier
    }

    // MARK: Computed

    var body: some HTML {
        if let photo = listing.photos.first {
            img(
                .class(["photo", modifier].compactMap(\.self).joined(separator: " ")),
                .src(photo),
                .alt("Photo of \(listing.title), front"),
                .custom(name: "loading", value: "lazy")
            )
        } else {
            Cover(listing.cover, modifier: modifier)
        }
    }

}