import { css } from '@emotion/react';
import type { TabName } from '../store/useGameStore';

interface TabItem {
  key: TabName;
  label: string;
  icon: string;
}

const TABS: TabItem[] = [
  { key: 'elements', label: '원소', icon: '⚗️' },
  { key: 'evolution', label: '강화', icon: '⬆️' },
  { key: 'fusion', label: '합성', icon: '🔮' },
  { key: 'shop', label: '상점', icon: '🛒' },
  { key: 'achievements', label: '업적', icon: '🏆' },
  { key: 'settings', label: '설정', icon: '⚙️' },
];

interface BottomTabBarProps {
  activeTab: TabName;
  onTabChange: (tab: TabName) => void;
}

const containerStyle = css`
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
`;

const tabItemStyle = css`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 10px;
  cursor: pointer;
  background: none;
  border: none;
  gap: 4px;
`;

const iconStyle = css`
  font-size: 22px;
  line-height: 1;
`;

const labelStyle = (active: boolean) => css`
  font-size: 10px;
  font-weight: ${active ? 600 : 400};
  color: ${active ? '#3182F6' : '#8b8b8b'};
  letter-spacing: -0.2px;
`;

export function BottomTabBar({ activeTab, onTabChange }: BottomTabBarProps) {
  return (
    <nav css={containerStyle}>
      {TABS.map((tab) => (
        <button key={tab.key} css={tabItemStyle} onClick={() => onTabChange(tab.key)}>
          <span css={iconStyle}>{tab.icon}</span>
          <span css={labelStyle(activeTab === tab.key)}>{tab.label}</span>
        </button>
      ))}
    </nav>
  );
}