import clsx from 'clsx'
import { Anchor } from 'components/Anchor'

export interface LinkTabProps {
  title: string
  description: string
  href: string
  isActive?: boolean
}

export const LinkTab = (props: LinkTabProps) => {
  const { title, description, href, isActive } = props

  return (
    <Anchor
      className={clsx(
        'isolate p-4 space-y-1 border-2',
        'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
        isActive ? 'border-plumbus' : 'border-transparent',
        isActive ? 'bg-plumbus/5 hover:bg-plumbus/10' : 'hover:bg-white/5',
      )}
      href={href}
    >
      <h4 className="font-bold">{title}</h4>
      <span className="text-sm text-white/80 line-clamp-2">{description}</span>
    </Anchor>
  )
}