"use client"
import { useIntl } from "react-intl"

import { DeleteIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import { buttonVariants } from "./variants"

import type { ClearSearchButtonProps } from "@/types/components/search"

export default function ClearSearchButton({
  getItemProps,
  handleClearSearchHistory,
  highlightedIndex,
  index,
}: ClearSearchButtonProps) {
  const intl = useIntl()
  const classNames = buttonVariants({
    variant: index === highlightedIndex ? "active" : "default",
  })

  return (
    <button
      {...getItemProps({
        className: classNames,
        id: "clear-search",
        index,
        item: "clear-search",
        role: "button",
      })}
      onClick={handleClearSearchHistory}
      tabIndex={0}
      type="button"
    >
      <DeleteIcon color="burgundy" height={20} width={20} />
      <Caption color="burgundy" type="bold" asChild>
        <span>{intl.formatMessage({ id: "Clear searches" })}</span>
      </Caption>
    </button>
  )
}
