import { Link } from 'react-router-dom'
import type { Guide } from '@/data/guides'

interface GuideCardProps {
  guide: Guide
}

export function GuideCard({ guide }: GuideCardProps) {
  const Icon = guide.icon

  return (
    <Link
      to={`/guides/${guide.slug}`}
      className="glass-card block rounded-2xl p-5 transition-all"
    >
      <div className="flex items-start gap-3.5">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
          <Icon size={20} className="text-primary" />
        </div>
        <div className="min-w-0">
          <h3 className="text-sm font-heading font-semibold text-foreground mb-1">
            {guide.title}
          </h3>
          <p className="text-xs text-muted-foreground leading-relaxed">
            {guide.summary}
          </p>
          <span className="mt-2 inline-block font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary">
            {guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
          </span>
        </div>
      </div>
    </Link>
  )
}