import { useState } from "react";
import LogOutButton from "@/components/log-out-button";
import ThemeToggle from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import ColourPicker from "@/components/ui/colour-picker";
import Icon, { iconNames, iconStyles } from "@/components/ui/icon";

function Test() {
    const [colour, setColour] = useState("#e05656");

    return (
        <main className="w-full min-h-[100vh] flex justify-center items-center gap-32 p-4">
            <div className="mt-8 flex flex-col items-center gap-4">
                <p className="text-muted-foreground">Other test components</p>
                <div className="flex gap-4">
                    <Button linkTo="/">go back to "/"</Button>
                </div>
                <LogOutButton />
                <ColourPicker colour={colour} onChange={setColour} />

                <ThemeToggle />
            </div>

            <div>
                <h1 className="text-2xl font-bold">Icon Demo</h1>
                <p className="text-muted-foreground">
                    All {iconNames.length} icons across {iconStyles.length} styles
                </p>

                <div className="overflow-x-auto">
                    <table className="border-collapse">
                        <thead>
                            <tr className="border-b">
                                <th className="text-left p-2 font-medium">Name</th>
                                {iconStyles.map((iconStyle) => (
                                    <th key={iconStyle} className="text-center p-2 font-medium capitalize">
                                        {iconStyle}
                                    </th>
                                ))}
                            </tr>
                        </thead>
                        <tbody>
                            {iconNames.map((name) => (
                                <tr key={name} className="border-b hover:bg-muted/50">
                                    <td className="font-mono text-sm pl-2 pr-12">{name}</td>
                                    {iconStyles.map((iconStyle) => (
                                        <td key={iconStyle} className="p-2 text-center">
                                            <Icon icon={name} iconStyle={iconStyle} size={24} />
                                        </td>
                                    ))}
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    );
}

export default Test;