import { Camera, ShieldCheck, Farm } from "@phosphor-icons/react/dist/ssr";
import { StepProps } from "./types";
import { titleStyle, optionCardStyle, figtree } from "./styles";

export const SafetyDetails = ({ data, updateData }: StepProps) => {
    const safetyItems = [
        { id: 'camera', label: 'Security camera(s)', icon: Camera },
        { id: 'weapons', label: 'Dangerous weapons', icon: ShieldCheck },
        { id: 'animals', label: 'Dangerous animals', icon: Farm },
    ];

    const toggleSafety = (id: string) => {
        const current = data.safety || [];
        const updated = current.includes(id)
            ? current.filter((item: string) => item !== id)
            : [...current, id];
        updateData('safety', updated);
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Does your place have any of these?</h2>
            <div className="flex flex-col gap-4">
                {safetyItems.map((item) => (
                    <button
                        key={item.id}
                        type="button"
                        onClick={() => toggleSafety(item.id)}
                        className={`${optionCardStyle((data.safety || []).includes(item.id))} flex-row justify-between items-center w-full`}
                    >
                        <div className="flex items-center gap-4">
                            <item.icon size={32} />
                            <span className={`${figtree.className} text-lg font-medium`}>{item.label}</span>
                        </div>
                        <div className={`w-6 h-6 rounded-full border-2 border-black flex items-center justify-center transition-colors ${(data.safety || []).includes(item.id) ? 'bg-black' : 'bg-transparent'}`}>
                            {(data.safety || []).includes(item.id) && <div className="w-2 h-2 bg-white rounded-full" />}
                        </div>
                    </button>
                ))}
            </div>
        </div>
    )
}
