/**
 * 하단 메뉴 — 홈 | 설문 | 검사 | 대시보드 | 마이페이지 (PRD §3.6.2, Phase B)
 * MD3 디자인 토큰 적용, MatIcon으로 아이콘 통일
 */
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
import MatIcon from './MatIcon';

const Nav = styled.nav`
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--md3-surface);
  border-top: 1px solid var(--md3-outline-variant);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
`;

const Item = styled(NavLink)`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--md3-on-surface-variant);
  flex: 1;
  padding: 4px 0;
  transition: color 0.15s;

  &.active {
    color: var(--md3-status-borderline);
    font-weight: 600;
  }
`;

const IconWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
`;

const items = [
  { to: '/home', label: 'Home', icon: 'home' },
  { to: '/survey', label: 'Survey', icon: 'description' },
  { to: '/test', label: 'Test', icon: 'psychology' },
  { to: '/dashboard', label: 'Dashboard', icon: 'dashboard' },
  { to: '/mypage', label: 'Profile', icon: 'person' },
];

export default function BottomNav() {
  return (
    <Nav role="navigation" aria-label="메인 내비게이션">
      {items.map((it) => (
        <Item key={it.to} to={it.to} end={it.to === '/home'}>
          <IconWrapper>
            <MatIcon name={it.icon} size={20} weight={500} />
          </IconWrapper>
          {it.label}
        </Item>
      ))}
    </Nav>
  );
}