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
  /** Entity total shown beside the arrow; omit for sections without a count (e.g. settings). */
  count?: number | null
  countLabel?: string
}

export function SectionCard({
  icon: Icon,
  title,
  description,
  href,
  count,
  countLabel,
}: SectionCardProps) {
  const showCount = typeof count === 'number' && Number.isFinite(count)
  const formattedCount = showCount
    ? new Intl.NumberFormat('en-US').format(count)
    : null

  return (
    <Link to={href} className={styles.card}>
      <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}>
        {formattedCount !== null && countLabel ? (
          <div className={styles.countMeta}>
            <span className={styles.countValue} lang="en" dir="ltr">
              {formattedCount}
            </span>
            <span className={styles.countLabel}>{countLabel}</span>
          </div>
        ) : (
          <span />
        )}
        <span className={styles.arrowBtn} aria-hidden="true">
          <ArrowRight size={18} className={styles.arrowIcon} />
        </span>
      </div>
    </Link>
  )
}
