type FooterLink = {
  label: string;
  href?: string;
  onClick?: () => void;
};

type FooterColumn = {
  title: string;
  items: FooterLink[];
};

const FooterSimpleCard = ({
  brand,
  columns,
  copyright,
  links,
}: {
  brand: string;
  columns: FooterColumn[];
  copyright: string;
  links: FooterLink[];
}) => {
  return (
    <footer
      data-webild-section="FooterSimpleCard"
      aria-label="Site footer"
      className="w-full py-20"
    >
      <div className="w-content-width mx-auto p-8 rounded-theme card">
        <div className="flex flex-col md:flex-row gap-8 md:gap-0 justify-between items-start mb-8">
          <h2 className="text-4xl font-medium">{brand}</h2>

          <div className="w-full md:w-fit flex flex-wrap gap-y-8 md:gap-8">
            {columns.map((column) => (
              <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
                <h3 className="text-sm opacity-50">{column.title}</h3>
                {column.items.map((item) => (
                  <a
                    key={item.label}
                    href={item.href}
                    className="text-base hover:opacity-75 transition-opacity"
                  >
                    {item.label}
                  </a>
                ))}
              </div>
            ))}
          </div>
        </div>

        <div className="flex items-center justify-between pt-8 border-t border-foreground/20">
          <span className="text-sm opacity-50">{copyright}</span>
          <div className="flex items-center gap-3">
            {links.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="text-sm opacity-50 hover:opacity-75 transition-opacity"
              >
                {link.label}
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

export default FooterSimpleCard;