import woodButton from '../assets/ui/wood-button.webp';
import './QuickActionRail.css';

type RailKey = 'benefit' | 'task' | 'luck' | 'invite';

interface RailItem {
  key: RailKey;
  label: string;
  icon: string;
}

interface Props {
  onAction?: (key: RailKey) => void;
}

const ITEMS: RailItem[] = [
  { key: 'benefit', label: '福利中心', icon: '礼' },
  { key: 'task', label: '每日任务', icon: '任' },
  { key: 'luck', label: '幸运抽奖', icon: '抽' },
  { key: 'invite', label: '邀请好友', icon: '邀' },
];

export function QuickActionRail({ onAction }: Props) {
  return (
    <div className="quick-action-rail">
      {ITEMS.map((item) => (
        <button
          key={item.key}
          type="button"
          className="quick-action-rail__item"
          onClick={() => onAction?.(item.key)}
          aria-label={item.label}
        >
          <span className="quick-action-rail__button-wrap">
            <img className="quick-action-rail__button-bg" src={woodButton} alt="" aria-hidden="true" />
            <span className="quick-action-rail__icon">{item.icon}</span>
          </span>
          <span className="quick-action-rail__label">{item.label}</span>
        </button>
      ))}
    </div>
  );
}
