// @design-system: feedback/EmptyState/illustrations/NoFav
/**
 * NoFav — empty heart outline with MDLogo inside.
 * Used with EmptyState illustration prop for zero-favorites states.
 */
import { MDLogo } from '@/components/ui/icons/MDLogo';

export function NoFav() {
  return (
    <svg
      viewBox="0 0 140 140"
      width="140"
      height="140"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
    >
      {/* Soft halo */}
      <circle cx="70" cy="70" r="64" fill="var(--color-brand-primary-50)" />
      {/* Heart outline */}
      <path
        d="M70 104 C38 80 22 64 22 46 C22 32 32 22 44 22 C54 22 62 28 70 40 C78 28 86 22 96 22 C108 22 118 32 118 46 C118 64 102 80 70 104 Z"
        fill="none"
        stroke="var(--color-brand-primary-200)"
        strokeWidth="3"
        strokeDasharray="7 5"
      />
      {/* MDLogo centered inside heart */}
      <foreignObject x="52" y="56" width="36" height="26">
        <MDLogo size={36} />
      </foreignObject>
    </svg>
  );
}