import React from "react";
import { clsx } from "clsx";

interface Service {
  id: string;
  title: string;
  description: string;
  icon?: string;
  features?: string[];
  link?: string;
}

interface StandardServicesProps {
  title?: string;
  description?: string;
  services?: Service[];
  layout?: "grid-2" | "grid-3" | "grid-4";
  showFeatures?: boolean;
  showIcons?: boolean;
  className?: string;
  theme?: {
    primaryColor?: string;
    secondaryColor?: string;
    accentColor?: string;
    fontFamily?: string;
  };
}

const defaultServices: Service[] = [
  {
    id: "web-development",
    title: "웹 개발",
    description:
      "현대적이고 반응형 웹사이트를 구축하여 온라인 비즈니스의 성공을 도모합니다.",
    icon: "🌐",
    features: ["반응형 디자인", "SEO 최적화", "성능 향상"],
    link: "#web-dev",
  },
  {
    id: "mobile-app",
    title: "모바일 앱",
    description:
      "iOS와 Android를 위한 네이티브 및 크로스 플랫폼 모바일 애플리케이션을 개발합니다.",
    icon: "📱",
    features: ["크로스 플랫폼", "네이티브 성능", "UI/UX 디자인"],
    link: "#mobile-app",
  },
  {
    id: "consulting",
    title: "IT 컨설팅",
    description:
      "기업의 디지털 전환과 기술 전략 수립을 위한 전문적인 컨설팅 서비스를 제공합니다.",
    icon: "💡",
    features: ["전략 수립", "기술 분석", "디지털 전환"],
    link: "#consulting",
  },
  {
    id: "support",
    title: "기술 지원",
    description:
      "24/7 기술 지원을 통해 시스템의 안정적인 운영과 문제 해결을 도와드립니다.",
    icon: "🛠️",
    features: ["24/7 지원", "빠른 응답", "전문 기술팀"],
    link: "#support",
  },
];

export function StandardServices({
  title = "서비스",
  description = "고품질의 전문 서비스로 고객의 성공을 지원합니다.",
  services = defaultServices,
  layout = "grid-2",
  showFeatures = true,
  showIcons = true,
  className,
  theme = {},
}: StandardServicesProps) {
  const gridClasses = {
    "grid-2": "grid-cols-1 md:grid-cols-2",
    "grid-3": "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
    "grid-4": "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
  };

  return (
    <section
      className={clsx("py-16 px-4", className)}
      style={{
        fontFamily: theme.fontFamily,
      }}
    >
      <div className="max-w-6xl mx-auto">
        {/* 헤더 */}
        <div className="text-center mb-12">
          <h2
            className="text-3xl font-bold mb-4"
            style={{ color: theme.primaryColor }}
          >
            {title}
          </h2>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            {description}
          </p>
        </div>

        {/* 서비스 그리드 */}
        <div className={clsx("grid gap-8", gridClasses[layout])}>
          {services.map((service) => (
            <div
              key={service.id}
              className="bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow border border-gray-100"
            >
              {/* 아이콘 */}
              {showIcons && service.icon && (
                <div className="text-4xl mb-4 text-center">{service.icon}</div>
              )}

              {/* 제목 */}
              <h3
                className="text-xl font-semibold mb-3 text-center"
                style={{ color: theme.secondaryColor || theme.primaryColor }}
              >
                {service.title}
              </h3>

              {/* 설명 */}
              <p className="text-gray-600 mb-4 text-center">
                {service.description}
              </p>

              {/* 기능 목록 */}
              {showFeatures &&
                service.features &&
                service.features.length > 0 && (
                  <ul className="space-y-2 mb-4">
                    {service.features.map((feature, index) => (
                      <li
                        key={index}
                        className="flex items-center text-sm text-gray-700"
                      >
                        <span
                          className="w-2 h-2 rounded-full mr-3 flex-shrink-0"
                          style={{
                            backgroundColor:
                              theme.accentColor ||
                              theme.primaryColor ||
                              "#3B82F6",
                          }}
                        />
                        {feature}
                      </li>
                    ))}
                  </ul>
                )}

              {/* 링크 */}
              {service.link && (
                <div className="text-center">
                  <a
                    href={service.link}
                    className="inline-flex items-center text-sm font-medium hover:underline transition-colors"
                    style={{ color: theme.primaryColor || "#3B82F6" }}
                  >
                    자세히 보기
                    <svg
                      className="w-4 h-4 ml-1"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 5l7 7-7 7"
                      />
                    </svg>
                  </a>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* CTA 버튼 */}
        <div className="text-center mt-12">
          <button
            className="px-8 py-3 rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
            style={{
              backgroundColor: theme.primaryColor || "#3B82F6",
            }}
          >
            모든 서비스 보기
          </button>
        </div>
      </div>
    </section>
  );
}