export function TShirtSVG({ size = 300 }) {
  const padding = size * 0.1;
  const innerSize = size - padding * 2;

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        pointerEvents: 'none',
        zIndex: 0,
      }}
    >
      {/* T-shirt outline */}
      <path
        d={`
          M ${padding} ${padding + innerSize * 0.15}
          L ${padding + innerSize * 0.15} ${padding}
          L ${size - padding - innerSize * 0.15} ${padding}
          L ${size - padding} ${padding + innerSize * 0.15}
          L ${size - padding} ${size - padding}
          L ${padding} ${size - padding}
          Z
        `}
        fill="none"
        stroke="var(--border)"
        strokeWidth="2"
        strokeDasharray="4,4"
      />
      {/* Chest area indicator (design zone) */}
      <rect
        x={size * 0.3}
        y={size * 0.25}
        width={size * 0.4}
        height={size * 0.35}
        fill="none"
        stroke="var(--accent)"
        strokeWidth="1.5"
        opacity="0.5"
      />
      {/* Label */}
      <text
        x={size / 2}
        y={size * 0.45}
        textAnchor="middle"
        fill="var(--text-muted)"
        fontSize="10"
        fontFamily="var(--font-mono)"
      >
        Print Zone
      </text>
    </svg>
  );
}