import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import React, { ReactElement } from 'react';

interface CardProps {
  logo: ReactElement;
  name: string;
  color: string;
}

export default function TechnologyCard({ logo, name, color }: CardProps) {
  return (
    <div
      className='transition-all rounded-sm border-2 border-dark p-2 lg:px-2 lg:py-3 duration-300 ease-in-out z-50 flex justify-center items-center w-fit text-[var(--color-text)] flex-col hover:opacity-[100%] cursor-pointer basis-[13%] hover:[box-shadow:var(--box-shadow)] overflow-visible'
      style={
        {
          borderColor: color,
          ...({
            '--box-shadow': `0 0 25px ${color}, 0 0 15px ${color}`,
          } as Record<string, string>),
        } as React.CSSProperties
      }
    >
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger>{logo}</TooltipTrigger>
          <TooltipContent
            side='top'
            className='text-[var(--color-background)] font-bold'
            style={{
              fontFamily: 'var(--text-font-family)',
              backgroundColor: color,
            }}
          >
            {name}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}
