import { Sun, Moon, Thermometer, Wind, Power, Settings2 } from "lucide-react"; import { cn } from "@/lib/utils"; interface Device { id: string; name: string; status: "on" | "off"; value?: number; unit?: string; icon: React.ReactNode; } interface Scene { id: string; name: string; icon: React.ReactNode; isActive: boolean; } interface EnvironmentCardProps { roomName?: string; temperature?: number; devices?: Device[]; scenes?: Scene[]; } export function EnvironmentCard({ roomName = "Living Room", temperature = 22.5, devices = [ { id: "1", name: "Main Light", status: "on", value: 80, unit: "%", icon: , }, { id: "2", name: "AC", status: "off", value: 22, unit: "°C", icon: , }, ], scenes = [ { id: "1", name: "Day", icon: , isActive: false, }, { id: "2", name: "Night", icon: , isActive: true, }, ], }: EnvironmentCardProps) { return (

{/* Header */}

{roomName}

{temperature}°C

{/* Devices */}

{devices.map((device) => (

{device.icon}

{device.name}

{device.value && (

{device.value} {device.unit}

)}

))}

Scenes

{scenes.map((scene) => ( ))}

); }

Prop	Type	Default	Description
`roomName`	`string`	`"Living Room"`	Name of the room
`temperature`	`number`	`22.5`	Current temperature in Celsius
`devices`	`Device[]`	-	Array of smart devices
`scenes`	`Scene[]`	-	Array of scene configurations

Environment Card

Living Room

Main Light

AC

Scenes

Installation

Props

Living Room

Main Light

AC

Scenes