interface ErrorReportButtonProps {
  onClick: () => void
  className?: string
  disabled?: boolean
}

export const ErrorReportButton: React.FC<ErrorReportButtonProps> = ({
  onClick,
  className = '',
  disabled = false
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        inline-flex items-center gap-2 px-3 py-2
        text-sm font-medium text-gray-600
        bg-transparent
        border-0 rounded-md
        transition-all duration-200
        ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:text-red-600'}
        ${className}
      `}
    >
      <svg
        className="w-4 h-4"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z"
        />
      </svg>
      回報錯誤
    </button>
  )
}