import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
import { cn } from '@/shared/lib/cn';

interface SpaceSelectCarouselProps {
  rooms: RoomTheme[];
  selectedRoomId: string;
  onSelect: (roomId: string) => void;
}

export const SpaceSelectCarousel = ({
  rooms,
  selectedRoomId,
  onSelect,
}: SpaceSelectCarouselProps) => {
  return (
    <div className="-mx-1 overflow-x-auto px-1 pb-1">
      <div className="flex min-w-full gap-2.5">
        {rooms.map((room) => {
          const selected = room.id === selectedRoomId;

          return (
            <button
              key={room.id}
              type="button"
              onClick={() => onSelect(room.id)}
              className={cn(
                'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]',
                selected
                  ? 'border-sky-200/38 shadow-[0_0_0_1px_rgba(186,230,253,0.2),0_0_10px_rgba(56,189,248,0.12)]'
                  : 'border-white/16 hover:border-white/24',
              )}
              style={getRoomCardBackgroundStyle(room)}
              aria-label={`${room.name} 선택`}
            >
              <span className="absolute inset-x-0 bottom-0 h-[56%] bg-[linear-gradient(180deg,rgba(2,6,23,0)_0%,rgba(2,6,23,0.2)_52%,rgba(2,6,23,0.24)_100%)]" />
              {selected ? (
                <span className="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded-full border border-sky-200/64 bg-sky-200/24 text-[10px] font-semibold text-sky-50">
                  ✓
                </span>
              ) : null}
              <div className="absolute inset-x-2 bottom-2">
                <p className="truncate text-sm font-semibold text-white/96">{room.name}</p>
                <p className="truncate text-[11px] text-white/66">{room.vibeLabel}</p>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};