"use client"

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { toast } from "sonner";
import { ModeToggle } from "@/components/mode-toggle";

export default function Home() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [selectedOption, setSelectedOption] = useState("");
  const [isChecked, setIsChecked] = useState(false);
  const [isSwitchOn, setIsSwitchOn] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    toast.success("Formulario enviado exitosamente!");
    console.log({ name, email, message, selectedOption, isChecked, isSwitchOn });
  };

  const handleDialogOpen = () => {
    toast.info("Dialog abierto");
  };

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="flex flex-col min-h-screen justify-center items-center space-y-8">
        <img 
          src="/sumire.png" 
          alt="Sumire Yoshizawa" 
          className="w-48 h-48 object-contain animate-bounce"
        />
        <h1 className="text-5xl font-bold tracking-tight">sumire</h1>
      </div>
    </div>
  );
}