import { Clock, Plus } from 'lucide-react';
import React from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface TimeBlockSectionProps {
  label: string;
  icon?: string;
  startTime?: string;
  endTime?: string;
  children: React.ReactNode;
  onAddPlace?: () => void;
  showAddButton?: boolean;
  isEmpty?: boolean;
}

export const TimeBlockSection: React.FC<TimeBlockSectionProps> = ({
  label,
  icon,
  startTime,
  endTime,
  children,
  onAddPlace,
  showAddButton = false,
  isEmpty = false,
}) => {
  return (
    <div className="w-full mb-4 sm:mb-6">
      {/* Time Block Header - Optimized for visibility on all devices */}
      <div className="w-full flex items-center gap-3 bg-primary/20 py-3 px-4 rounded-lg border-l-4 border-primary mb-3 md:bg-gradient-to-r md:from-primary/20 md:via-primary/10 md:to-transparent">
        <div className="flex items-center gap-3 flex-1">
          {/* Icon */}
          {icon && (
            <span className="text-xl sm:text-2xl shrink-0" role="img" aria-label={label}>
              {icon}
            </span>
          )}
          
          {/* Label ve Zaman */}
          <div className="flex flex-col">
            <h4 className="font-bold text-sm sm:text-base text-foreground leading-tight">{label}</h4>
            {startTime && endTime && (
              <span className="text-[10px] sm:text-sm text-muted-foreground font-medium">
                {startTime} - {endTime}
              </span>
            )}
          </div>
        </div>
        
        {showAddButton && (
          <Button 
            variant="ghost" 
            size="sm" 
            className="h-8 text-xs rounded-full hover:bg-primary/30 shrink-0"
            onClick={onAddPlace}
          >
            <Plus className="h-3 w-3 mr-1" />
            Ekle
          </Button>
        )}
      </div>

      {/* Zaman bloğundaki yerler */}
      <div className="w-full space-y-3 pl-2">
        {isEmpty ? (
          <div className="text-sm text-muted-foreground italic py-3 px-4 bg-muted/50 rounded-lg border border-border/50">
            Bu zaman diliminde henüz yer eklenmemiş
          </div>
        ) : (
          children
        )}
      </div>
    </div>
  );
};

// Serbest zaman aralığı bileşeni
export const FreeTimeGap: React.FC<{
  startTime: string;
  endTime: string;
  onAddPlace: () => void;
}> = ({ startTime, endTime, onAddPlace }) => {
  return (
    <div className="w-full my-4 p-4 border-2 border-dashed border-border rounded-xl bg-muted/30 hover:bg-muted/50 hover:border-primary/50 transition-all group">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div className="flex items-center gap-2 text-muted-foreground">
          <Clock className="h-4 w-4 shrink-0" />
          <span className="text-sm font-medium">
            {startTime} - {endTime}
          </span>
          <span className="text-xs">(Serbest Zaman)</span>
        </div>
        <Button 
          variant="ghost" 
          size="sm" 
          className="rounded-full opacity-60 group-hover:opacity-100 transition-opacity text-xs h-8 w-full sm:w-auto"
          onClick={onAddPlace}
        >
          <Plus className="h-4 w-4 mr-1" />
          Buraya yer ekle
        </Button>
      </div>
    </div>
  );
};
