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

interface Testimonial {
  id: string;
  name: string;
  position: string;
  company: string;
  content: string;
  rating: number;
  avatar?: string;
  date?: string;
}

interface StandardTestimonialsProps {
  title?: string;
  description?: string;
  testimonials?: Testimonial[];
  layout?: "grid" | "carousel" | "masonry";
  showRatings?: boolean;
  showAvatars?: boolean;
  showCompany?: boolean;
  className?: string;
  theme?: {
    primaryColor?: string;
    secondaryColor?: string;
    accentColor?: string;
    fontFamily?: string;
  };
}

const defaultTestimonials: Testimonial[] = [
  {
    id: "1",
    name: "김민수",
    position: "CEO",
    company: "테크스타트업",
    content:
      "AgentC의 솔루션을 도입한 후 업무 효율성이 300% 향상되었습니다. 특히 자동화 기능이 정말 뛰어납니다.",
    rating: 5,
    avatar: "/images/testimonials/kim-minsu.jpg",
    date: "2024-01-15",
  },
  {
    id: "2",
    name: "이지영",
    position: "마케팅 팀장",
    company: "글로벌 마케팅",
    content:
      "고객 관리와 데이터 분석이 한 번에 가능해져서 마케팅 캠페인의 ROI가 크게 개선되었습니다.",
    rating: 5,
    avatar: "/images/testimonials/lee-jiyoung.jpg",
    date: "2024-01-10",
  },
  {
    id: "3",
    name: "박준호",
    position: "개발팀장",
    company: "소프트웨어 회사",
    content:
      "API 연동이 정말 간단하고 문서화가 잘 되어 있어서 개발 기간을 단축할 수 있었습니다.",
    rating: 4,
    avatar: "/images/testimonials/park-junho.jpg",
    date: "2024-01-05",
  },
  {
    id: "4",
    name: "최수빈",
    position: "프로젝트 매니저",
    company: "컨설팅 회사",
    content:
      "팀 협업 도구로 사용하고 있는데, 프로젝트 관리가 한층 체계적으로 변했습니다.",
    rating: 5,
    avatar: "/images/testimonials/choi-subin.jpg",
    date: "2023-12-28",
  },
];

export function StandardTestimonials({
  title = "고객 후기",
  description = "저희 서비스를 이용하신 고객분들의 생생한 후기를 확인해보세요.",
  testimonials = defaultTestimonials,
  layout = "grid",
  showRatings = true,
  showAvatars = true,
  showCompany = true,
  className,
  theme = {},
}: StandardTestimonialsProps) {
  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, index) => (
      <span
        key={index}
        className={clsx(
          "text-lg",
          index < rating ? "text-yellow-400" : "text-gray-300"
        )}
      >
        ★
      </span>
    ));
  };

  const renderTestimonial = (testimonial: Testimonial) => (
    <div
      key={testimonial.id}
      className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300"
      style={{
        fontFamily: theme.fontFamily,
        borderColor: theme.primaryColor,
      }}
    >
      {showRatings && (
        <div className="flex items-center mb-4">
          <div className="flex">{renderStars(testimonial.rating)}</div>
          <span className="ml-2 text-sm text-gray-600">
            {testimonial.rating}/5
          </span>
        </div>
      )}

      <blockquote className="text-gray-700 text-lg leading-relaxed mb-6">
        "{testimonial.content}"
      </blockquote>

      <div className="flex items-center">
        {showAvatars && (
          <div className="w-12 h-12 bg-gray-200 rounded-full mr-4 flex items-center justify-center overflow-hidden">
            {testimonial.avatar ? (
              <img
                src={testimonial.avatar}
                alt={testimonial.name}
                className="w-full h-full object-cover"
              />
            ) : (
              <span
                className="text-white font-semibold"
                style={{ backgroundColor: theme.primaryColor }}
              >
                {testimonial.name.charAt(0)}
              </span>
            )}
          </div>
        )}

        <div>
          <div className="font-semibold text-gray-900">{testimonial.name}</div>
          <div className="text-sm text-gray-600">
            {testimonial.position}
            {showCompany && testimonial.company && (
              <span> • {testimonial.company}</span>
            )}
          </div>
          {testimonial.date && (
            <div className="text-xs text-gray-500 mt-1">
              {new Date(testimonial.date).toLocaleDateString("ko-KR")}
            </div>
          )}
        </div>
      </div>
    </div>
  );

  return (
    <section
      className={clsx("py-16 bg-gray-50", className)}
      style={{ fontFamily: theme.fontFamily }}
    >
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-12">
          <h2
            className="text-3xl md:text-4xl font-bold mb-4"
            style={{ color: theme.primaryColor || "#1f2937" }}
          >
            {title}
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            {description}
          </p>
        </div>

        {/* Testimonials */}
        <div
          className={clsx(
            layout === "grid" && "grid gap-8 md:grid-cols-2 lg:grid-cols-3",
            layout === "carousel" && "flex overflow-x-auto space-x-6 pb-4",
            layout === "masonry" && "columns-1 md:columns-2 lg:columns-3 gap-8"
          )}
        >
          {testimonials.map(renderTestimonial)}
        </div>

        {/* Call to Action */}
        <div className="text-center mt-12">
          <p className="text-gray-600 mb-4">
            더 많은 고객 후기가 궁금하신가요?
          </p>
          <button
            className="px-8 py-3 rounded-lg font-semibold text-white transition-colors duration-300 hover:opacity-90"
            style={{
              backgroundColor: theme.primaryColor || "#3b82f6",
            }}
          >
            전체 후기 보기
          </button>
        </div>
      </div>
    </section>
  );
}