"use client";

type CloseIconButtonProps = {
  ariaLabel: string;
  className?: string;
  onClick: () => void;
};

export function CloseIconButton({
  ariaLabel,
  className = "",
  onClick,
}: CloseIconButtonProps) {
  return (
    <button
      type="button"
      aria-label={ariaLabel}
      onClick={onClick}
      className={`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[#dfe7f4] bg-white text-[#7b8ba7] transition-all duration-200 hover:border-[#c9d7ee] hover:bg-[#f7faff] hover:text-[#2f6df6] ${className}`}
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="h-[18px] w-[18px]"
      >
        <path d="m7 7 10 10" />
        <path d="m17 7-10 10" />
      </svg>
    </button>
  );
}