"use client";

import { motion } from "framer-motion";

interface Room {
  id: string;
  emoji: string;
  name: string;
  deviceCount: number;
  color: string;
}

const ROOMS: Room[] = [
  { id: "living", emoji: "🛋️", name: "Гостиная", deviceCount: 3, color: "#6366f1" },
  { id: "bedroom", emoji: "🛏️", name: "Спальня", deviceCount: 2, color: "#8b5cf6" },
  { id: "kitchen", emoji: "🍳", name: "Кухня", deviceCount: 1, color: "#f59e0b" },
  { id: "bathroom", emoji: "🚿", name: "Ванная", deviceCount: 0, color: "#06b6d4" },
];

interface Props {
  onRoomClick?: (roomId: string) => void;
}

export default function RoomsRow({ onRoomClick }: Props) {
  return (
    <div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
      {ROOMS.map((room, i) => (
        <motion.button
          key={room.id}
          onClick={() => onRoomClick?.(room.id)}
          className="flex-shrink-0 glass-card flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
          style={{
            minWidth: "140px",
            border: `1px solid ${room.color}22`,
          }}
          initial={{ opacity: 0, x: -10 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.3, delay: i * 0.05 }}
          whileTap={{ scale: 0.93 }}
          whileHover={{ scale: 1.02 }}
        >
          <div
            className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 text-xl"
            style={{ background: `${room.color}18` }}
          >
            {room.emoji}
          </div>
          <div className="text-left min-w-0">
            <div
              className="text-sm font-semibold truncate"
              style={{ color: "var(--text-primary)" }}
            >
              {room.name}
            </div>
            <div
              className="text-xs"
              style={{ color: "var(--text-secondary)" }}
            >
              {room.deviceCount}{" "}
              {room.deviceCount === 1
                ? "устройство"
                : room.deviceCount >= 2 && room.deviceCount <= 4
                ? "устройства"
                : "устройств"}
            </div>
          </div>
          {room.deviceCount > 0 && (
            <div
              className="ml-auto w-2 h-2 rounded-full flex-shrink-0"
              style={{ background: room.color }}
            />
          )}
        </motion.button>
      ))}
    </div>
  );
}