import { Link } from 'react-router-dom'
import { ArrowRight, type LucideIcon } from 'lucide-react'
import styles from './SectionCard.module.css'

interface SectionCardProps {
  icon: LucideIcon
  title: string
  description: string
  linkText: string
  href: string
}

export function SectionCard({
  icon: Icon,
  title,
  description,
  linkText,
  href,
}: SectionCardProps) {
  return (
    <Link to={href} className={styles.card} data-card-hover>
      <div className={styles.iconWrap}>
        <Icon size={24} strokeWidth={1.75} />
      </div>

      <h3 className={styles.title}>{title}</h3>
      <p className={styles.description}>{description}</p>

      <div className={styles.footer}>
        <span className={styles.link}>{linkText}</span>
        <span className={styles.arrowBtn} aria-hidden="true">
          <ArrowRight size={18} />
        </span>
      </div>
    </Link>
  )
}
