/**
 * SeasonMark — small inline sun / snowflake indicator used in the
 * "Today's Summary" card to signal irrigation season status. Drawn as
 * a flat 16px mark; uses the project's existing color tokens so it
 * works in light and dark contexts.
 */
type Props = {
  inSeason: boolean;
  size?: number;
  className?: string;
  title?: string;
};

export function SeasonMark({
  inSeason,
  size = 16,
  className = "",
  title,
}: Props) {
  const stroke = "#1a4d2e";
  if (inSeason) {
    return (
      <svg
        width={size}
        height={size}
        viewBox="0 0 16 16"
        className={className}
        role="img"
        aria-label={title ?? "In irrigation season"}
        style={{ display: "inline-block", flexShrink: 0 }}
      >
        <circle cx="8" cy="8" r="2.8" fill="#facc15" stroke={stroke} strokeWidth="1" />
        {[
          [8, 1],
          [8, 15],
          [1, 8],
          [15, 8],
          [3, 3],
          [13, 13],
          [3, 13],
          [13, 3],
        ].map(([cx, cy], i) => (
          <line
            key={i}
            x1={8}
            y1={8}
            x2={cx}
            y2={cy}
            stroke={stroke}
            strokeWidth="1"
            strokeLinecap="round"
            opacity="0.7"
          />
        ))}
      </svg>
    );
  }
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      className={className}
      role="img"
      aria-label={title ?? "Outside irrigation season"}
      style={{ display: "inline-block", flexShrink: 0 }}
    >
      <g stroke="#1e3a8a" strokeWidth="1.2" strokeLinecap="round" fill="none">
        <line x1="8" y1="1" x2="8" y2="15" />
        <line x1="1" y1="8" x2="15" y2="8" />
        <line x1="2.5" y1="2.5" x2="13.5" y2="13.5" />
        <line x1="2.5" y1="13.5" x2="13.5" y2="2.5" />
        {/* Arrow heads */}
        <polyline points="6.5,2.5 8,1 9.5,2.5" />
        <polyline points="6.5,13.5 8,15 9.5,13.5" />
        <polyline points="2.5,6.5 1,8 2.5,9.5" />
        <polyline points="13.5,6.5 15,8 13.5,9.5" />
        <polyline points="4,4 2.5,2.5 4,1" />
        <polyline points="12,4 13.5,2.5 12,1" />
        <polyline points="4,12 2.5,13.5 4,15" />
        <polyline points="12,12 13.5,13.5 12,15" />
      </g>
    </svg>
  );
}
