'use client';

import { ArrowRightLongIcon } from '@/components/icons';
import { MainProject } from '@/types';
import Image from 'next/image';
import Link from 'next/link';

interface ProjectCardProps {
  project: MainProject;
}

export const ProjectCard = ({ project }: ProjectCardProps) => {
  return (
    <div className="relative flex flex-col gap-7 px-7 md:px-8 py-[26px] xl:p-[50px] 2xl:gap-20 rounded-3xl shadow-[0_4px_4px_0_rgba(0_0_0_/_25%)] bg-neutral-950/60 xl:flex-row">
      <div className="place-self-center md:flex md:items-center md:h-40 xl:h-auto xl:w-[30%]">
        <Image
          src={project.imageUrl}
          alt={project.alt}
          width={500}
          height={300}
          className="xl:h-full xl:w-full"
        />
      </div>

      <p className="text-[13px] lg:tracking-wide xl:text-[15px] xl:tracking-widest xl:pb-6 xl:w-[70%]">
        {project.description}
      </p>
      <Link
        href={project.url}
        target="_blank"
        rel="noreferrer noopener"
        className="relative group w-[182px] place-self-center border-[3px] border-transparent rounded-2xl xl:rounded-3xl bg-accent py-[10px] px-16 xl:absolute xl:right-0 xl:bottom-0 xl:rounded-se-none xl:rounded-es-none text-center text-lg leading-[1.4rem] uppercase font-semibold text-button outline-none transition-all duration-500 ease-in-out"
      >
        <div className="h-[22px]"></div>
        <span className="absolute bottom-2 right-16 opacity-100 group-hover:opacity-0 group-hover:translate-x-8 transition-all duration-500 ease-in-out">
          Visit
        </span>
        <ArrowRightLongIcon className="absolute bottom-[3px] right-[90px] opacity-0 group-hover:opacity-100 group-hover:translate-x-6 transition-all duration-500 ease-in-out" />
      </Link>
    </div>
  );
};