import React from 'react';
import { motion } from 'framer-motion';
import ServiceCard from '../components/ServiceCard';
import { serviceList } from '../data/services';

/**
 * 홈 페이지 컴포넌트
 * 사용 가능한 서비스 목록을 표시합니다.
 * 
 * @param {Object} props
 * @param {Object} props.services - 각 서비스의 상태 (key: service id, value: boolean)
 */
export default function Service({ services }) {
  return (
    <motion.section 
      key="service"
      initial={{ opacity: 0, y: 10 }} 
      animate={{ opacity: 1, y: 0 }} 
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.2 }}
    >
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">서비스</h1>
        <p className="text-slate-400">운영 중인 모든 서비스를 한눈에 확인하세요.</p>
      </div>
      
      <div className="grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
        {serviceList.map(svc => (
          <ServiceCard key={svc.id} {...svc} status={services[svc.id]} />
        ))}
      </div>
    </motion.section>
  );
}
