import {
  type RoomCategory,
  type RoomItem,
  categorias,
} from "../../data/roomSetupData";

type FilterButtonProps = {
  category: RoomCategory;
  active: boolean;
  onSelect: (id: string) => void;
};

export function FilterButton({
  category,
  active,
  onSelect,
}: FilterButtonProps) {
  return (
    <button
      type="button"
      onClick={() => onSelect(category.id)}
      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 border ${
        active
          ? "bg-[#0047AB] border-[#0047AB] text-white shadow-sm"
          : "bg-white border-[#0047AB] text-[#0047AB] hover:bg-[#eaf1ff]"
      }`}
    >
      {category.label} ({category.count})
    </button>
  );
}

type RoomCardProps = {
  room: RoomItem;
  onSelect: (url: string) => void;
};

export function RoomCard({ room, onSelect }: RoomCardProps) {
  const categoryLabel =
    categorias.find((cat) => cat.id === room.category)?.label ?? room.category;

  return (
    <button
      type="button"
      onClick={() => onSelect(room.img)}
      className="group cursor-pointer text-left"
    >
      <div className="relative aspect-[4/3] rounded-2xl overflow-hidden mb-3 bg-[#edf4ff]">
        <img
          src={room.img}
          alt={room.title}
          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300" />
      </div>
      <div className="px-1">
        <h3 className="text-[#333333] font-medium text-sm">{room.title}</h3>
        <p className="text-[#707070] text-xs mt-1">{categoryLabel}</p>
      </div>
    </button>
  );
}