import { useIsMobile } from '../hooks/useIsMobile';
import './FAB.css';

const PlusIcon = () => (
  <svg
    className="fab__icon"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    aria-hidden="true"
  >
    <path
      d="M12 5v14M5 12h14"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
    />
  </svg>
);

export default function FAB({ onClick, icon, label = '액션', className = '' }) {
  const isMobile = useIsMobile();

  if (!isMobile) return null;

  return (
    <button
      type="button"
      className={`fab ${className}`}
      onClick={onClick}
      aria-label={label}
    >
      {icon ?? <PlusIcon />}
    </button>
  );
}