// @design-system: feedback/EmptyState/illustrations/NoDeals
/**
 * NoDeals — empty deal-card silhouette with brand-tinted halo and MDLogo corner mark.
 * Used with EmptyState illustration prop for zero-deals states.
 */
import { MDLogo } from '@/components/ui/icons/MDLogo';

export function NoDeals() {
  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)" />
      {/* Deal card silhouette */}
      <rect x="30" y="38" width="80" height="64" rx="8" fill="var(--color-brand-primary-100)" />
      <rect x="30" y="38" width="80" height="26" rx="8" fill="var(--color-brand-primary-200)" />
      {/* Price line placeholders */}
      <rect x="40" y="76" width="36" height="6" rx="3" fill="var(--color-brand-primary-200)" />
      <rect x="40" y="88" width="22" height="4" rx="2" fill="var(--color-neutral-200)" />
      {/* Tag icon hint */}
      <circle
        cx="92"
        cy="82"
        r="10"
        fill="var(--color-brand-primary-50)"
        stroke="var(--color-brand-primary-200)"
        strokeWidth="1.5"
      />
      <line
        x1="88"
        y1="82"
        x2="96"
        y2="82"
        stroke="var(--color-brand-primary-500)"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      <line
        x1="92"
        y1="78"
        x2="92"
        y2="86"
        stroke="var(--color-brand-primary-500)"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      {/* MDLogo corner stamp — rendered as foreignObject to use React component */}
      <foreignObject x="90" y="90" width="36" height="26">
        <MDLogo size={36} />
      </foreignObject>
    </svg>
  );
}