import { Typography } from '../../components/Typography'

interface WelcomeCardProps {
  title: string
  description: string
  link: {
    text: string
    url: string
  }
}

export const WelcomeCard = ({ title, description, link }: WelcomeCardProps) => {
  return (
    <div className="flex h-full cursor-pointer flex-col justify-between rounded-lg border border-border bg-background p-4 transition-shadow duration-300 hover:shadow-lg">
      <div>
        <Typography variant="h3" className="mb-2 !border-b-0">
          {title}
        </Typography>
        <Typography variant="body-s" className="mb-0">
          {description}
        </Typography>
      </div>
      <a href={link.url} className="mt-4 text-sm text-link hover:underline">
        {link.text}
      </a>
    </div>
  )
}