import React from 'react';
import { exploreData } from '../lib/data';
import Link from 'next/link';

const ExploreGridItem = () => {
  return (
    <div>
      <div className="font-bold flex items-center gap-2">
        <span>Исследовать</span>
        <div className="w-[25px] h-[4px] bg-gradient-to-r from-primary to-secondary"></div>
      </div>
      <div className="mt-[20px] flex flex-col gap-[10px] items-start">
        {exploreData.map((item) => (
          <Link key={item.id} href={item.link}>
            <p className="text-[14px] text-muted font-semibold duration-200 hover:text-white">
              {item.title}
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default ExploreGridItem;
