Workout

import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { CheckCircle, Mountain, Coffee, Timer } from 'lucide-react';

const WorkoutSchedule = () => {
  const [completedDays, setCompletedDays] = useState([]);
  
  const schedule = [
    {
      day: 'Sunday',
      workout: {
        name: 'Gentle Flow',
        activities: [
          '5 minutes easy yoga stretches',
          '5 push-ups (any style)',
          '5 bodyweight rows'
        ],
        tips: 'Perfect for starting the week. Do the exercises at any time during the day.'
      }
    },
    {
      day: 'Monday',
      workout: {
        name: 'Strength Focus',
        activities: [
          '2 sets of 5 push-ups',
          '2 sets of 5 bodyweight rows'
        ],
        tips: 'Rest as needed between sets. Form over quantity.'
      }
    },
    {
      day: 'Tuesday',
      workout: {
        name: 'Yoga Day',
        activities: [
          '10 minutes of any yoga poses you enjoy',
          'Focus on breathing and movement'
        ],
        tips: 'This is about movement and mindfulness, not perfection.'
      }
    },
    {
      day: 'Wednesday',
      workout: {
        name: 'Strength Focus',
        activities: [
          '2 sets of 5 push-ups',
          '2 sets of 5 bodyweight rows'
        ],
        tips: 'Mirror of Monday. Listen to your body and adjust as needed.'
      }
    },
    {
      day: 'Thursday',
      workout: {
        name: 'Yoga Flow',
        activities: [
          '10 minutes yoga',
          'Optional: 5 push-ups if feeling energetic'
        ],
        tips: 'Gentle session to prepare for tomorrow\'s hike.'
      }
    },
    {
      day: 'Friday',
      workout: {
        name: 'Hiking Day',
        activities: ['Enjoy your regular hike!'],
        tips: 'Your main activity for the week - enjoy nature!',
        icon: Mountain
      }
    },
    {
      day: 'Saturday',
      workout: {
        name: 'Rest Day',
        activities: ['Take it easy today'],
        tips: 'Rest is essential for progress. You earned it!',
        icon: Coffee
      }
    }
  ];

  const getCurrentDay = () => {
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return days[new Date().getDay()];
  };

  const toggleComplete = (day) => {
    if (completedDays.includes(day)) {
      setCompletedDays(completedDays.filter(d => d !== day));
    } else {
      setCompletedDays([...completedDays, day]);
    }
  };

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          Your Weekly Movement Practice
          <Timer className="w-6 h-6 text-blue-500" />
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Alert className="mb-4">
          <AlertDescription>
            Focus on consistency, not perfection. Any movement is better than no movement!
          </AlertDescription>
        </Alert>
        
        <div className="space-y-4">
          {schedule.map(({ day, workout }) => (
            <div 
              key={day}
              className={`p-4 rounded-lg border ${
                day === getCurrentDay() ? 'border-blue-500 border-2' : 'border-gray-200'
              }`}
            >
              <div className="flex items-center justify-between mb-2">
                <h3 className="text-lg font-semibold flex items-center gap-2">
                  {day}
                  {workout.icon && <workout.icon className="w-5 h-5" />}
                </h3>
                <button
                  onClick={() => toggleComplete(day)}
                  className="text-gray-500 hover:text-green-500 transition-colors"
                >
                  <CheckCircle 
                    className={`w-6 h-6 ${
                      completedDays.includes(day) ? 'text-green-500 fill-current' : ''
                    }`}
                  />
                </button>
              </div>
              
              <h4 className="font-medium text-blue-600 mb-2">{workout.name}</h4>
              
              <ul className="list-disc list-inside text-sm text-gray-600 mb-2">
                {workout.activities.map((activity, index) => (
                  <li key={index}>{activity}</li>
                ))}
              </ul>
              
              <p className="text-sm text-gray-500 italic">{workout.tips}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export default WorkoutSchedule;