import { NavLink } from 'react-router-dom';
import { Instagram, Youtube } from 'lucide-react';
import { SOCIAL_LINKS } from '@/constants';

/**
 * X (Twitter) 아이콘 컴포넌트
 */
const XIcon = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
  </svg>
);

/**
 * PC 헤더 컴포넌트
 */
function Header() {
  const navItems = [
    { path: '/', label: '홈' },
    { path: '/members', label: '멤버' },
    { path: '/album', label: '앨범' },
    { path: '/schedule', label: '일정' },
  ];

  return (
    <header className="bg-white shadow-sm sticky top-0 z-50">
      <div className="px-24">
        <div className="flex items-center justify-between h-16">
          {/* 로고 */}
          <NavLink to="/" className="flex items-center gap-2">
            <span className="text-2xl font-bold text-primary">fromis_9</span>
          </NavLink>

          {/* 네비게이션 */}
          <nav className="flex items-center gap-8">
            {navItems.map((item) => (
              <NavLink
                key={item.path}
                to={item.path}
                className={({ isActive }) =>
                  `text-sm font-medium transition-colors hover:text-primary ${
                    isActive ? 'text-primary' : 'text-gray-600'
                  }`
                }
              >
                {item.label}
              </NavLink>
            ))}
          </nav>

          {/* SNS 링크 */}
          <div className="flex items-center gap-4">
            <a
              href={SOCIAL_LINKS.youtube}
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-500 hover:text-red-600 transition-colors"
            >
              <Youtube size={20} />
            </a>
            <a
              href={SOCIAL_LINKS.instagram}
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-500 hover:text-pink-600 transition-colors"
            >
              <Instagram size={20} />
            </a>
            <a
              href={SOCIAL_LINKS.twitter}
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-500 hover:text-black transition-colors"
            >
              <XIcon size={20} />
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

export default Header;
