interface LinkGroup {
  title: string;
  links: { label: string; href: string }[];
}

interface StoreDoubleColumnProps {
  left: { title: string; links: LinkGroup[] };
  right: { title: string; links: LinkGroup[] };
}

export default function StoreDoubleColumn({ left, right }: StoreDoubleColumnProps) {
  const renderColumn = (column: { title: string; links: LinkGroup[] }) => (
    <div className="flex-1">
      <h3 className="font-bold text-lg mb-4">{column.title}</h3>
      {column.links.map((group, i) => (
        <div key={i} className="mb-4">
          <p className="font-medium text-gray-900 mb-2">{group.title}</p>
          <ul className="space-y-2">
            {group.links.map((link, j) => (
              <li key={j}>
                <a
                  href={link.href}
                  className="text-gray-600 hover:text-blue-600 transition-colors"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );

  return (
    <div className="bg-gray-50 py-12">
      <div className="container mx-auto px-4">
        <div className="flex gap-12">
          {renderColumn(left)}
          {renderColumn(right)}
        </div>
      </div>
    </div>
  );
}