'use client';

import { useTranslations } from 'next-intl';
import { X } from 'lucide-react';

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

export function DialogCloseButton({ onClick, className = '' }: DialogCloseButtonProps) {
  const t = useTranslations('common');

  return (
    <button
      type="button"
      onClick={onClick}
      className={`shrink-0 rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35 ${className}`}
      aria-label={t('close')}
    >
      <X className="h-5 w-5 icon-flat" />
    </button>
  );
}
