'use client';

import * as React from 'react';
import NextLink from 'next/link';

import {
  ResourceDoc,
  ResourceDevHub,
  ResourceVideoCourse,
  ResourceBlog,
  ArrowRightIcon,
} from '@/components/Icon';
import {
  DOC_CLOUD,
  WEBSITE_DEVELOPER_HUB,
  WEBSITE_EDUCATION,
  RESOURCE_BLOG,
} from '@/constant/url';

export default function Resource() {
  return (
    <section className="my-8 flex w-full flex-col items-center">
      <h2 className="pb-4 pt-4 md:pt-8 lg:pt-16 text-center font-bold leading-normal">
        Resources
      </h2>
      <ResourceCardList />
    </section>
  );
}

const ResourceList = [
  {
    id: 'doc',
    title: 'Documentations',
    description: 'Essential TiDB Cloud guides, knowledge, and API details.',
    href: DOC_CLOUD,
    icon: ResourceDoc,
  },
  {
    id: 'dev-hub',
    title: 'Developer Hub',
    href: WEBSITE_DEVELOPER_HUB,
    description: `Comprehensive tools and community support for TiDB developers.`,
    icon: ResourceDevHub,
  },
  {
    id: 'video-course',
    title: 'Video Courses',
    href: WEBSITE_EDUCATION,
    description: `Beginner to advanced TiDB training through engaging videos.`,
    icon: ResourceVideoCourse,
  },
  {
    id: 'blog',
    title: 'Blog',
    href: RESOURCE_BLOG,
    description: `Updates, deep dives, and community stories from the TiDB ecosystem.`,
    icon: ResourceBlog,
  },
];

const ResourceCard = (props: {
  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
  title: string;
  description?: string;
  href: string;
}) => {
  return (
    <NextLink
      href={props.href}
      target='_blank'
      className="group flex flex-col items-start rounded-md p-5 duration-300 ease-in-out hover:bg-[#1A1A1A]"
    >
      <h3
        className="bg-clip-text pb-4 text-2xl font-bold leading-normal text-transparent"
        style={{
          backgroundImage:
            'linear-gradient(90deg, #90D8FA 0%, #1FB7FF 0.01%, #26D9D9 69.31%, #11EDB8 127.95%)',
        }}
      >
        <props.icon className="inline h-8 w-auto pr-1" /> {props.title}
      </h3>
      <p className="text-sm text-darkgrey-300">{props.description}</p>
      <ArrowRightIcon className="mt-2 h-6 w-6 duration-300 ease-in-out group-hover:translate-x-1 group-hover:scale-125" />
    </NextLink>
  );
};

const ResourceCardList = () => {
  return (
    <div className="flex max-w-7xl flex-col gap-4 px-6 sm:grid sm:grid-cols-2 lg:grid-cols-4 lg:px-8">
      {ResourceList.map((item) => (
        <ResourceCard
          key={item.id}
          icon={item.icon}
          title={item.title}
          description={item.description}
          href={item.href}
        />
      ))}
    </div>
  );
};