interface Props {
  icon: string;
  title: string;
  description: string;
  highlight?: boolean;
}

export default function MatchCard({
  icon,
  title,
  description,
  highlight,
}: Props) {
  return (
    <div
      className={`p-6 rounded-xl border ${
        highlight
          ? "border-primary bg-primary/5 border-l-4 border-l-primary"
          : "border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900"
      }`}
    >
      <span className="material-symbols-outlined text-3xl text-primary">
        {icon}
      </span>
      <h3 className="text-xl font-bold mt-2">{title}</h3>
      <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">
        {description}
      </p>
    </div>
  );
}