import SwiftUI

extension TaskGroupListView {
    
    /// A card-style view representing a single todo task group with its count.
    ///
    /// This view displays a task group as a compact card showing:
    /// - The group's icon and title on the left
    /// - The task count on the right
    /// - A tinted background using the group's color
    ///
    /// The view is designed to be used within the `TaskGroupListView` and is typically
    /// wrapped in a `NavigationLink` to allow navigation to detailed task lists.
    struct Card: View {

        // MARK: Properties

        /// The number of tasks.
        private let count: Int
        
        /// The task group.
        private let group: TodoGroup

        // MARK: Initializers

        /// Creates a task group list card.
        /// - Parameters:
        ///   - group: The task group to display.
        ///   - count: The number of tasks in the group.
        init(
            group: TodoGroup,
            count: Int
        ) {
            self.count = count
            self.group = group
        }

        // MARK: Body

        /// The content and behavior of the view.
        ///
        /// Displays a horizontal card layout with the group icon and title on the left,
        /// and the task count on the right, all within a colored background.
        var body: some View {
            HStack {
                VStack(
                    alignment: .leading,
                    spacing: 8
                ) {
                    Image(systemName: group.iconName)
                        .font(.system(size: 40))
                        .foregroundStyle(group.color)
                    
                    Text(group.title)
                        .font(.headline)
                        .foregroundStyle(.primary)
                        .frame(
                            maxWidth: .infinity,
                            alignment: .leading
                        )
                }
                .padding(.vertical, 24)
                
                Spacer()

                Text("\(count)")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundStyle(group.color)
            }
            .padding(.horizontal, 24)
            .background(
                RoundedRectangle(cornerRadius: 8)
                    .fill(group.color.opacity(0.1))
            )
        }
    }

}

// MARK: - Previews

#Preview("Today item") {
    TaskGroupListView.Card(
        group: .today,
        count: .random(in: 0...20)
    )
    .padding(.horizontal, 16)
}

#Preview("Upcoming item") {
    TaskGroupListView.Card(
        group: .upcoming,
        count: .random(in: 0...20)
    )
    .padding(.horizontal, 16)
}

#Preview("Overdue item") {
    TaskGroupListView.Card(
        group: .overdue,
        count: .random(in: 0...20)
    )
    .padding(.horizontal, 16)
}

#Preview("Completed item") {
    TaskGroupListView.Card(
        group: .completed,
        count: .random(in: 0...20)
    )
    .padding(.horizontal, 16)
}