'use client';

import React from 'react';

interface FooterLink {
  label: string;
  href: string;
}

interface FooterColumn {
  title: string;
  items: FooterLink[];
}

interface FooterBaseRevealProps {
  logoText: string;
  copyrightText: string;
  columns: FooterColumn[];
}

export default function FooterBaseReveal({
  logoText,
  copyrightText,
  columns
}: FooterBaseRevealProps) {
  return (
    <footer className="bg-slate-900 text-slate-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* Top Section */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          {/* Logo Section */}
          <div className="flex flex-col justify-start">
            <h2 className="text-2xl font-bold text-white mb-2">{logoText}</h2>
            <p className="text-slate-400 text-sm">
              Building amazing communities together
            </p>
          </div>

          {/* Footer Columns */}
          {columns.map((column, index) => (
            <div key={index}>
              <h3 className="text-lg font-semibold text-white mb-4">
                {column.title}
              </h3>
              <ul className="space-y-2">
                {column.items.map((item, itemIndex) => (
                  <li key={itemIndex}>
                    <a
                      href={item.href}
                      className="text-slate-400 hover:text-white transition-colors duration-200 text-sm"
                    >
                      {item.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Divider */}
        <div className="border-t border-slate-700 my-8"></div>

        {/* Bottom Section */}
        <div className="flex flex-col sm:flex-row justify-between items-center">
          <p className="text-slate-400 text-sm mb-4 sm:mb-0">
            {copyrightText}
          </p>
          <div className="flex gap-6">
            <a
              href="#"
              className="text-slate-400 hover:text-white transition-colors duration-200"
              aria-label="Privacy Policy"
            >
              <span className="text-sm">Privacy Policy</span>
            </a>
            <a
              href="#"
              className="text-slate-400 hover:text-white transition-colors duration-200"
              aria-label="Terms of Service"
            >
              <span className="text-sm">Terms of Service</span>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}