type TaskIconProps = {
  className?: string;
};

export function TaskTypeIcon({
  icon,
  className = "size-11",
}: {
  icon: string;
  className?: string;
}) {
  switch (icon) {
    case "health":
      return <HealthIcon className={className} />;
    case "mind":
      return <MindIcon className={className} />;
    case "learning":
      return <LearningIcon className={className} />;
    case "money":
      return <MoneyIcon className={className} />;
    case "fitness":
      return <FitnessIcon className={className} />;
    default:
      return <LearningIcon className={className} />;
  }
}

function HealthIcon({ className }: TaskIconProps) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden="true">
      <defs>
        <linearGradient id="healthGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#67E8F9" />
          <stop offset="100%" stopColor="#2D9CDB" />
        </linearGradient>
      </defs>
      <path
        d="M24 8c-2 6-8 8-8 14 0 5 4 8 8 12 4-4 8-7 8-12 0-6-6-8-8-14z"
        fill="url(#healthGrad)"
      />
    </svg>
  );
}

function MindIcon({ className }: TaskIconProps) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden="true">
      <defs>
        <linearGradient id="mindGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#6EE7B7" />
          <stop offset="100%" stopColor="#2EC4B6" />
        </linearGradient>
      </defs>
      <circle cx="24" cy="24" r="14" fill="url(#mindGrad)" opacity="0.25" />
      <path
        d="M24 34c-6-4-10-8-10-14 0-4 3-7 6-8 1 3 2 5 4 5s3-2 4-5c3 1 6 4 6 8 0 6-4 10-10 14z"
        fill="url(#mindGrad)"
      />
    </svg>
  );
}

function LearningIcon({ className }: TaskIconProps) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden="true">
      <defs>
        <linearGradient id="learningGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FBD38D" />
          <stop offset="100%" stopColor="#F2994A" />
        </linearGradient>
      </defs>
      <path
        d="M8 16 24 10l16 6v18l-16 6-16-6V16z"
        fill="url(#learningGrad)"
      />
      <path d="M24 16v24" stroke="#fff" strokeWidth="2" opacity="0.7" />
    </svg>
  );
}

function MoneyIcon({ className }: TaskIconProps) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden="true">
      <defs>
        <linearGradient id="moneyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FDE68A" />
          <stop offset="100%" stopColor="#F2C94C" />
        </linearGradient>
      </defs>
      <circle cx="24" cy="24" r="14" fill="url(#moneyGrad)" />
      <text
        x="24"
        y="29"
        textAnchor="middle"
        fill="#8B6914"
        fontSize="16"
        fontWeight="700"
      >
        $
      </text>
    </svg>
  );
}

function FitnessIcon({ className }: TaskIconProps) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden="true">
      <defs>
        <linearGradient id="fitnessGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#94A3B8" />
          <stop offset="100%" stopColor="#1D2D50" />
        </linearGradient>
      </defs>
      <rect x="8" y="20" width="8" height="8" rx="2" fill="url(#fitnessGrad)" />
      <rect x="32" y="20" width="8" height="8" rx="2" fill="url(#fitnessGrad)" />
      <rect x="16" y="22" width="16" height="4" rx="2" fill="#64748B" />
    </svg>
  );
}
