import React from "react";

import { Autocomplete, Chip, TextField } from "@mui/material";
import { useI18n } from "../i18n/I18nProvider";

export default function TagsInput({
  label,
  value,
  onChange,
}: {
  label?: string;
  value: string[];
  onChange: (next: string[]) => void;
}) {
  const { t } = useI18n();
  return (
    <Autocomplete
      multiple
      freeSolo
      options={[]}
      value={value}
      onChange={(_, next) => {
        const cleaned = (next as string[])
          .map((t) => (t || "").trim())
          .filter(Boolean);
        onChange(Array.from(new Set(cleaned)));
      }}
      renderTags={(tagValue, getTagProps) =>
        tagValue.map((option: string, index: number) => (
          <Chip variant="outlined" label={option} {...getTagProps({ index })} key={option} size="small" />
        ))
      }
      renderInput={(params) => <TextField {...params} label={label ?? t("cvEditorTags")} placeholder={t("tagsInputPlaceholder")} />}
    />
  );
}
