import { Calendar } from 'lucide-react';
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

interface DaySelectionStepProps {
  days: any[];
  selectedDayId?: string;
  onSelect: (dayId: string, dayNumber: number, date?: string) => void;
}

export const DaySelectionStep: React.FC<DaySelectionStepProps> = ({ days, selectedDayId, onSelect }) => {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium text-center">Hangi güne eklemek istersiniz?</h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        {days.map((day) => (
          <Card
            key={day.id}
            className={cn(
              "cursor-pointer transition-all hover:border-primary/50",
              selectedDayId === day.id ? "border-primary bg-primary/5" : "border-border"
            )}
            onClick={() => onSelect(day.id, day.day_number, day.date)}
          >
            <CardContent className="p-4 flex items-center space-x-3">
              <div className={cn(
                "p-2 rounded-full",
                selectedDayId === day.id ? "bg-primary text-primary-foreground" : "bg-muted"
              )}>
                <Calendar className="w-4 h-4" />
              </div>
              <div>
                <p className="font-medium text-sm">Gün {day.day_number}</p>
                {day.date && (
                  <p className="text-xs text-muted-foreground">
                    {new Date(day.date).toLocaleDateString('tr-TR', { weekday: 'long', day: 'numeric', month: 'long' })}
                  </p>
                )}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};
