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

const TIME_BLOCKS = [
  { id: 'morning', label: 'Sabah', icon: Sun, color: 'text-orange-500' },
  { id: 'afternoon', label: 'Öğle', icon: CloudSun, color: 'text-yellow-500' },
  { id: 'evening', label: 'Akşam', icon: SunDim, color: 'text-orange-600' },
  { id: 'night', label: 'Gece', icon: Moon, color: 'text-blue-500' },
];

interface TimeBlockSelectionStepProps {
  selectedBlock?: string;
  onSelect: (blockId: string) => void;
}

export const TimeBlockSelectionStep: React.FC<TimeBlockSelectionStepProps> = ({ selectedBlock, onSelect }) => {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium text-center">Günün hangi vaktinde gitmek istersiniz?</h3>
      <div className="grid grid-cols-2 gap-3">
        {TIME_BLOCKS.map((block) => (
          <Card
            key={block.id}
            className={cn(
              "cursor-pointer transition-all hover:border-primary/50",
              selectedBlock === block.id ? "border-primary bg-primary/5" : "border-border"
            )}
            onClick={() => onSelect(block.id)}
          >
            <CardContent className="p-4 flex flex-col items-center justify-center space-y-2">
              <block.icon className={cn("w-8 h-8", block.color)} />
              <p className="font-medium text-sm">{block.label}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};
