import { GavelIcon } from "lucide-react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import SimpleString from "@/back/Components/Inputs/SimpleString";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";

interface SlugifycatorProps {
  value: string;
  targetValue: string;
  wordCounter?: boolean;
  disabled?: boolean;
  setData: (name: string, value: string) => void;
}

export default function Slugifycator(props: Readonly<SlugifycatorProps>) {
  const {
    value,
    targetValue,
    setData,
    wordCounter = false,
    disabled = false,
  } = props;
  return (
    <div className="flex items-end gap-1">
      <SimpleString
        name="slug"
        label={str(
          trans("uwil-backend::back.form_associate_to", {
            params: {
              attribute: trans("uwil-backend::validation.custom.slug"),
            },
            choice: 1,
          }),
        )
          .ucFirst()
          .value()}
        placeholder="ex: John Doe"
        wordCounter={wordCounter}
        value={value}
        setData={setData}
        disabled={disabled}
      />
      <BtnOptionnalLinkWithTooltip
        content={<GavelIcon className="w-4 h-4 m-auto" />}
        tooltipContent={str(trans("uwil-backend::back.slugify"))
          .ucFirst()
          .value()}
        type="button"
        variant="secondary"
        onClick={() => {
          setData("slug", str(targetValue).slug().value());
        }}
        disabled={disabled}
      />
    </div>
  );
}