import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import Title from "@/components/atoms/title";
import React from "react";

function SkillCard(props: { title: string; skills: any[] }) {
    if (!props) return null;
    const { title, skills } = props;
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <Dialog
                open={open}
                onOpenChange={(o) => {
                    setOpen(o);
                }}
            >
                <DialogContent>
                    <DialogHeader>
                        <Title title={title} size="h2" capitalize />
                    </DialogHeader>

                    <div className="flex w-full flex-wrap items-center justify-center gap-4 py-8">
                        {skills.map((skill: any, i) => (
                            <div
                                key={i}
                                className="border-border flex w-max items-center gap-4 rounded-md border p-1.5 px-2 sm:p-2 sm:px-2.5"
                            >
                                <img
                                    src={skill.icon}
                                    alt="0"
                                    className="aspect-square h-8 w-auto"
                                />
                                <span className="text-lime">{skill.label}</span>
                            </div>
                        ))}
                    </div>
                </DialogContent>
            </Dialog>
            <button
                onClick={() => {
                    setOpen(true);
                }}
                className="jusitify-center border-border flex w-[28rem] flex-col items-center gap-6 rounded-xl border p-8 md:w-[36rem]"
            >
                <Title title={title} size="h3" capitalize weight="semibold" />
                <div className="flex w-full flex-wrap items-center justify-center gap-4">
                    {skills.map((skill: any, i) => (
                        <div
                            key={i}
                            className="border-border flex w-max items-center gap-4 rounded-md border p-1.5 px-2 sm:p-2 sm:px-2.5"
                        >
                            <img
                                src={skill.icon}
                                alt="0"
                                className="aspect-square h-8 w-auto"
                            />
                            <span className="text-lime">{skill.label}</span>
                        </div>
                    ))}
                </div>
            </button>
        </>
    );
}

export default SkillCard;