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

interface StarterFooterProps {
  companyName?: string;
  description?: string;
  links?: {
    label: string;
    href: string;
  }[];
  socialLinks?: {
    platform: string;
    href: string;
    icon?: string;
  }[];
  className?: string;
  theme?: {
    primaryColor?: string;
    secondaryColor?: string;
    fontFamily?: string;
  };
}

export function StarterFooter({
  companyName = "AgentC",
  description = "비즈니스를 위한 완벽한 솔루션을 제공합니다.",
  links = [
    { label: "서비스", href: "#services" },
    { label: "회사소개", href: "#about" },
    { label: "연락처", href: "#contact" },
  ],
  socialLinks = [],
  className,
  theme = {},
}: StarterFooterProps) {
  const currentYear = new Date().getFullYear();

  return (
    <footer
      className={clsx("bg-gray-50 border-t border-gray-200", className)}
      style={{
        fontFamily: theme.fontFamily,
      }}
    >
      <div className="max-w-6xl mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* 회사 정보 */}
          <div className="md:col-span-2">
            <h3
              className="text-xl font-bold mb-4"
              style={{ color: theme.primaryColor }}
            >
              {companyName}
            </h3>
            <p className="text-gray-600 mb-6 max-w-md">{description}</p>

            {/* 소셜 링크 */}
            {socialLinks.length > 0 && (
              <div className="flex space-x-4">
                {socialLinks.map((social, index) => (
                  <a
                    key={index}
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-400 hover:text-gray-600 transition-colors"
                    aria-label={`${social.platform} 링크`}
                  >
                    {social.icon ? (
                      <span>{social.icon}</span>
                    ) : (
                      <span className="text-sm">{social.platform}</span>
                    )}
                  </a>
                ))}
              </div>
            )}
          </div>

          {/* 빠른 링크 */}
          <div>
            <h4 className="text-lg font-semibold mb-4 text-gray-800">
              빠른 링크
            </h4>
            <ul className="space-y-2">
              {links.map((link, index) => (
                <li key={index}>
                  <a
                    href={link.href}
                    className="text-gray-600 hover:text-gray-800 transition-colors"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* 하단 구분선 및 저작권 */}
        <div className="border-t border-gray-200 mt-8 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-500 text-sm">
              © {currentYear} {companyName}. 모든 권리 보유.
            </p>
            <div className="mt-4 md:mt-0">
              <div className="flex space-x-6 text-sm text-gray-500">
                <a
                  href="#privacy"
                  className="hover:text-gray-700 transition-colors"
                >
                  개인정보처리방침
                </a>
                <a
                  href="#terms"
                  className="hover:text-gray-700 transition-colors"
                >
                  이용약관
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}