import { Slider } from "@/components/ui/slider";
import { Maximize2, Minimize2 } from "lucide-react";
import { useTranslation } from "react-i18next";

export type Density = "cozy" | "compact";

export function DensityToggle({
  value,
  onValueChange,
}: {
  value: Density;
  onValueChange: (d: Density) => void;
}) {
  const { t } = useTranslation();
  const densityLabel = value === "compact" ? t("common.densityCompact") : t("common.densityComfortable");
  return (
    <div
      className="flex items-center gap-2"
      title={t("common.densityTitle", { density: densityLabel })}
    >
      <Maximize2 className="w-4 h-4 text-muted-foreground" aria-hidden />
      <Slider
        className="w-16"
        min={0}
        max={1}
        step={1}
        value={[value === "compact" ? 1 : 0]}
        onValueChange={([v]) => onValueChange(v === 1 ? "compact" : "cozy")}
        aria-label={t("common.listDensity")}
      />
      <Minimize2 className="w-4 h-4 text-muted-foreground" aria-hidden />
    </div>
  );
}