Untitled

// components/trees/TreeTypes.tsx

import React from 'react';

// Spruce Tree (Original)
export const SpruceTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <path d="M45 90 L55 90 L53 60 L47 60 Z" fill="#8B4513" />
      <g>
        <path d="M20 60 L80 60 L50 30 Z" 
          fill="#2F855A" 
          opacity={scale >= 20 ? "1" : "0"} 
          className="transition-all duration-500" />
        <path d="M25 45 L75 45 L50 20 Z" 
          fill="#276749" 
          opacity={scale >= 50 ? "1" : "0"} 
          className="transition-all duration-500" />
        <path d="M30 30 L70 30 L50 10 Z" 
          fill="#22543D" 
          opacity={scale >= 80 ? "1" : "0"} 
          className="transition-all duration-500" />
        {scale >= 95 && (
          <>
            <circle cx="35" cy="50" r="2" fill="#48BB78" />
            <circle cx="65" cy="50" r="2" fill="#48BB78" />
            <circle cx="50" cy="25" r="2" fill="#48BB78" />
          </>
        )}
      </g>
    </svg>
  );
};

// Oak Tree
export const OakTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <path d="M45 90 L55 90 L53 50 L47 50 Z" fill="#795548" /> {/* Wider, shorter trunk */}
      <g>
        <circle 
          cx="50" cy="45" r={scale >= 20 ? "25" : "0"} 
          fill="#2E7D32"
          className="transition-all duration-500" />
        {scale >= 50 && (
          <>
            <circle cx="35" cy="35" r="15" fill="#388E3C" />
            <circle cx="65" cy="35" r="15" fill="#388E3C" />
          </>
        )}
        {scale >= 80 && (
          <>
            <circle cx="50" cy="25" r="12" fill="#43A047" />
            <circle cx="30" cy="45" r="10" fill="#43A047" />
            <circle cx="70" cy="45" r="10" fill="#43A047" />
          </>
        )}
        {scale >= 95 && (
          <>
            <circle cx="40" cy="30" r="2" fill="#81C784" />
            <circle cx="60" cy="30" r="2" fill="#81C784" />
            <circle cx="50" cy="20" r="2" fill="#81C784" />
          </>
        )}
      </g>
    </svg>
  );
};

// Cherry Blossom
export const CherryBlossomTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      {/* Curved trunk */}
      <path d="M45 90 Q50 70 47 50 L53 50 Q50 70 55 90" fill="#8D6E63" />
      <g>
        {scale >= 20 && (
          <circle cx="50" cy="45" r="20" fill="#FFCDD2" className="transition-all duration-500" />
        )}
        {scale >= 50 && (
          <>
            <circle cx="35" cy="35" r="12" fill="#F8BBD0" />
            <circle cx="65" cy="35" r="12" fill="#F8BBD0" />
            <path d="M50 25 Q60 35 70 25" stroke="#8D6E63" fill="none" strokeWidth="2" />
          </>
        )}
        {scale >= 80 && (
          <>
            <circle cx="50" cy="25" r="10" fill="#F48FB1" />
            <circle cx="30" cy="45" r="8" fill="#F48FB1" />
            <circle cx="70" cy="45" r="8" fill="#F48FB1" />
          </>
        )}
        {scale >= 95 && (
          <>
            <circle cx="40" cy="30" r="2" fill="#FCE4EC" />
            <circle cx="60" cy="30" r="2" fill="#FCE4EC" />
            <circle cx="50" cy="20" r="2" fill="#FCE4EC" />
          </>
        )}
      </g>
    </svg>
  );
};

// Dragon Blood Tree
export const DragonBloodTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      {/* Thick trunk */}
      <path d="M40 90 L60 90 L57 50 L43 50 Z" fill="#5D4037" />
      <g>
        {/* Umbrella-like canopy */}
        {scale >= 20 && (
          <path d="M20 50 Q50 20 80 50" 
            fill="#1B5E20" 
            className="transition-all duration-500" />
        )}
        {scale >= 50 && (
          <path d="M25 45 Q50 25 75 45" 
            fill="#2E7D32" />
        )}
        {scale >= 80 && (
          <>
            <path d="M30 40 Q50 30 70 40" fill="#388E3C" />
            <line x1="50" y1="30" x2="50" y2="45" stroke="#5D4037" strokeWidth="2" />
          </>
        )}
        {scale >= 95 && (
          <>
            <circle cx="40" cy="35" r="2" fill="#66BB6A" />
            <circle cx="60" cy="35" r="2" fill="#66BB6A" />
            <circle cx="50" cy="30" r="2" fill="#66BB6A" />
          </>
        )}
      </g>
    </svg>
  );
};

// Yucca Tree
export const YuccaTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      {/* Multiple trunks */}
      <path d="M45 90 L55 90 L53 40 L47 40 Z" fill="#8D6E63" />
      <g>
        {scale >= 20 && (
          <>
            {/* Spiky leaves */}
            <path d="M30 40 L50 20 L70 40" fill="#33691E" className="transition-all duration-500" />
            <path d="M35 45 L50 25 L65 45" fill="#558B2F" className="transition-all duration-500" />
          </>
        )}
        {scale >= 50 && (
          <>
            <path d="M40 50 L50 30 L60 50" fill="#689F38" />
            <line x1="50" y1="20" x2="50" y2="40" stroke="#8D6E63" strokeWidth="2" />
          </>
        )}
        {scale >= 80 && (
          <>
            {/* Additional leaf clusters */}
            <path d="M45 55 L50 35 L55 55" fill="#7CB342" />
            <path d="M42 45 L50 25 L58 45" fill="#7CB342" />
          </>
        )}
        {scale >= 95 && (
          <>
            {/* Flower spikes */}
            <circle cx="50" cy="25" r="2" fill="#FFF59D" />
            <circle cx="45" cy="30" r="2" fill="#FFF59D" />
            <circle cx="55" cy="30" r="2" fill="#FFF59D" />
          </>
        )}
      </g>
    </svg>
  );
};