Daily Streak View

import SwiftUI

struct StreakView: View {
    let streakCount: Int = 67
    let days: [String] = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
    let completedDays: Set<Int> = [0, 1, 2, 3, 4, 5]
    let currentDayIndex: Int = 5
    
    var body: some View {
        ScrollView{
            VStack(spacing: 20) {
                // Flame Icon
                ZStack {
                    // Outer glow/shadow
                    Circle()
                        .fill(Color.orange.opacity(0.15))
                        .frame(width: 100, height: 100)
                        .blur(radius: 10)
                    
                    // Flame Shape
                    Image(systemName: "flame.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 80, height: 80)
                        .foregroundStyle(
                            LinearGradient(
                                colors: [.orange, .yellow],
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .shadow(color: .orange.opacity(0.5), radius: 5, x: 0, y: 5)
                    
                    // Inner drop
                    Image(systemName: "drop.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30, height: 30)
                        .foregroundColor(.yellow)
                        .offset(y: 15)
                }
                .padding(.top, 40)
                
                // Streak Number
                VStack(spacing: -5) {
                    Text("\(streakCount)")
                        .font(.system(size: 80, weight: .bold, design: .rounded))
                        .foregroundColor(.orange)
                    
                    Text("day streak")
                        .font(.system(size: 24, weight: .bold, design: .rounded))
                        .foregroundColor(.orange)
                }
                
                // Weekly Progress
                HStack(spacing: 12) {
                    ForEach(0..<7) { index in
                        VStack(spacing: 8) {
                            Text(days[index])
                                .font(.system(size: 14, weight: .bold))
                                .foregroundColor(index == currentDayIndex || index == 6 ? .orange : .gray.opacity(0.6))
                            
                            ZStack {
                                if index == currentDayIndex {
                                    // Current day highlighted
                                    Circle()
                                        .fill(Color.blue.opacity(0.6))
                                        .frame(width: 32, height: 32)
                                        .overlay(
                                            Image(systemName: "checkmark")
                                                .font(.system(size: 16, weight: .bold))
                                                .foregroundColor(.white)
                                        )
                                        .modifier(SpeechBubbleTail())
                                } else if completedDays.contains(index) {
                                    Circle()
                                        .fill(Color.orange)
                                        .frame(width: 32, height: 32)
                                        .overlay(
                                            Image(systemName: "checkmark")
                                                .font(.system(size: 16, weight: .bold))
                                                .foregroundColor(.white)
                                        )
                                } else {
                                    Circle()
                                        .stroke(Color.gray.opacity(0.3), lineWidth: 2)
                                        .frame(width: 32, height: 32)
                                }
                            }
                        }
                    }
                }
                .padding(.vertical, 10)
                
                // Status Message
                Text("You extended your streak. Nice work!")
                    .font(.system(size: 16, weight: .medium))
                    .foregroundColor(.gray)
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 40)
                    .lineSpacing(4)
                
                Spacer()
            }
            .padding()
            .background(Color.white)
        }
    }
}

// Custom shape for the speech bubble tail on the blue checkmark
struct SpeechBubbleTail: ViewModifier {
    func body(content: Content) -> some View {
        content
            .overlay(
                ArrowShape()
                    .fill(Color.blue.opacity(0.6))
                    .frame(width: 8, height: 6)
                    .offset(y: 18)
                , alignment: .bottom
            )
    }
}

struct ArrowShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}