import React, { forwardRef } from "react";
import { BaseComponentProps } from "../../types";

export interface FooterProps extends BaseComponentProps {
  logo?: React.ReactNode;
  links?: Array<{
    title: string;
    items: Array<{
      label: string;
      href?: string;
      onClick?: () => void;
    }>;
  }>;
  copyright?: string;
  social?: Array<{
    platform: string;
    url: string;
    icon: React.ReactNode;
  }>;
}

export const Footer = forwardRef<HTMLElement, FooterProps>(
  (
    {
      className = "",
      logo,
      links = [],
      copyright = "© 2024 Agent C. All rights reserved.",
      social = [],
      children,
      ...props
    },
    ref
  ) => {
    return (
      <footer
        ref={ref}
        className={`bg-muted/50 border-t border-border ${className}`}
        {...props}
      >
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {/* Logo and Description */}
            <div className="md:col-span-1">
              {logo || (
                <div className="text-xl font-bold text-foreground mb-4">
                  Agent C
                </div>
              )}
              <p className="text-sm text-muted-foreground">
                Build amazing applications with our comprehensive component
                library.
              </p>
            </div>

            {/* Links */}
            {links.map((section, sectionIndex) => (
              <div key={sectionIndex}>
                <h3 className="text-sm font-semibold text-foreground mb-4">
                  {section.title}
                </h3>
                <ul className="space-y-2">
                  {section.items.map((link, linkIndex) => (
                    <li key={linkIndex}>
                      <button
                        onClick={link.onClick}
                        className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                      >
                        {link.label}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* Bottom section */}
          <div className="border-t border-border mt-8 pt-8 flex flex-col sm:flex-row justify-between items-center">
            <p className="text-sm text-muted-foreground">{copyright}</p>

            {social.length > 0 && (
              <div className="flex space-x-4 mt-4 sm:mt-0">
                {social.map((item, index) => (
                  <a
                    key={index}
                    href={item.url}
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    aria-label={item.platform}
                  >
                    {item.icon}
                  </a>
                ))}
              </div>
            )}
          </div>

          {children}
        </div>
      </footer>
    );
  }
);

Footer.displayName = "Footer";