"use client";

import { useState, useEffect } from "react";

export const HIDE_ARCHIVED_KEY = "app:hideArchivedProjects";

export function HideArchivedToggle() {
  const [checked, setChecked] = useState(false);

  useEffect(() => {
    setChecked(localStorage.getItem(HIDE_ARCHIVED_KEY) === "1");
  }, []);

  const toggle = (val: boolean) => {
    setChecked(val);
    localStorage.setItem(HIDE_ARCHIVED_KEY, val ? "1" : "0");
  };

  return (
    <label className="flex items-center gap-3 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => toggle(e.target.checked)}
        className="cursor-pointer accent-blue-500 w-4 h-4 shrink-0"
      />
      <div>
        <p className="text-sm font-medium text-zinc-200">Hide archived productions</p>
        <p className="text-xs text-muted-foreground mt-0.5">Archived projects won&apos;t appear on the Projects page</p>
      </div>
    </label>
  );
}