import type SectionType from './../types/section';

type Props = {
  sections: SectionType[];
};

const Grid = ({ sections }: Props) => (
  <div className="grid xlg:grid-cols-5 lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-4">
    {sections.map((section) => (
      <section key={section.name} className="mt-2">
        <h2 className="font-sans font-semibold text-2xl mb-4">
          {section.name}
        </h2>
        <ul>
          {section.items.map((item) => (
            <li key={item.name} className="my-2">
              <a
                href={item.url}
                target="_blank"
                rel="noopener noreferrer"
                className="
                  block
                  w-full
                  text-center
                  py-2
                  border-2
                  border-gray-400
                  rounded
                  hover:bg-gray-900
                  hover:border-gray-900
                  hover:text-white
                  transition
                  focus:ring-2
                  focus:ring-gray-600 text-gray-800
                "
              >
                {item.name}
              </a>
            </li>
          ))}
        </ul>
      </section>
    ))}
  </div>
);

export default Grid;