import { Mic, MicOff, Video, VideoOff, PhoneOff } from 'lucide-react';
import { useState } from 'react';

export function HuddleApp() {
  const [micOn, setMicOn] = useState(true);
  const [videoOn, setVideoOn] = useState(true);

  const handleLeave = () => {
    window.electronWindow.closeHuddle();
  };

  return (
    <div className="flex h-screen flex-col bg-background text-foreground">
      {/* Video grid */}
      <div className="flex flex-1 items-center justify-center gap-4 p-6">
        <div className="bg-muted flex aspect-video w-full max-w-md items-center justify-center rounded-xl">
          <span className="text-muted-foreground text-sm">You</span>
        </div>
        <div className="bg-muted flex aspect-video w-full max-w-md items-center justify-center rounded-xl">
          <span className="text-muted-foreground text-sm">Participant</span>
        </div>
      </div>

      {/* Controls bar */}
      <div className="flex items-center justify-center gap-3 border-t px-6 py-4">
        <button
          className="rounded-full bg-muted p-3 hover:bg-muted/80 transition-colors"
          onClick={() => setMicOn(!micOn)}
        >
          {micOn ? <Mic className="size-5" /> : <MicOff className="size-5 text-destructive" />}
        </button>
        <button
          className="rounded-full bg-muted p-3 hover:bg-muted/80 transition-colors"
          onClick={() => setVideoOn(!videoOn)}
        >
          {videoOn ? <Video className="size-5" /> : <VideoOff className="size-5 text-destructive" />}
        </button>
        <button
          className="rounded-full bg-destructive p-3 text-destructive-foreground hover:bg-destructive/90 transition-colors"
          onClick={handleLeave}
        >
          <PhoneOff className="size-5" />
        </button>
      </div>
    </div>
  );
}