Untitled

"use client"

import React, { useEffect, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { TreePine, Leaf, Trophy, Unlock } from "lucide-react";
import { Progress } from "@/components/ui/progress";

interface TreeVisualizationProps {
  impact: {
    co2_saved: number;
    trees_saved: number;
  };
}

// Simple Pine
const SimpleTree = ({ 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="M30 60 L70 60 L50 30 Z" 
          fill="#2F855A" 
          opacity={scale >= 20 ? "1" : "0"} 
          className="transition-all duration-500" />
        {scale >= 50 && (
          <circle cx="50" cy="45" r="3" fill="#48BB78" />
        )}
      </g>
    </svg>
  );
};

// Rounded Tree
const RoundTree = ({ 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="#966F33" />
      <g>
        <circle 
          cx="50" cy="45" r={scale >= 20 ? "20" : "0"} 
          fill="#38A169"
          className="transition-all duration-500" />
        {scale >= 50 && (
          <>
            <circle cx="44" cy="40" r="3" fill="#48BB78" />
            <circle cx="56" cy="40" r="3" fill="#48BB78" />
          </>
        )}
      </g>
    </svg>
  );
};

// Heart Tree
const HeartTree = ({ 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="M50 25 C20 25 20 62.5 50 75 C80 62.5 80 25 50 25" 
          fill="#68D391"
          opacity={scale >= 20 ? "1" : "0"}
          className="transition-all duration-500"
          transform="scale(0.8) translate(12.5, 0)" />
        {scale >= 50 && (
          <>
            <circle cx="43" cy="45" r="3" fill="#9AE6B4" />
            <circle cx="57" cy="45" r="3" fill="#9AE6B4" />
          </>
        )}
      </g>
    </svg>
  );
};

// Cloud Tree
const CloudTree = ({ 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 55 L47 55 Z" fill="#A0522D" />
      <g>
        {scale >= 20 && (
          <>
            <circle cx="50" cy="40" r="15" fill="#48BB78" className="transition-all duration-500" />
            <circle cx="35" cy="45" r="12" fill="#38A169" className="transition-all duration-500" />
            <circle cx="65" cy="45" r="12" fill="#38A169" className="transition-all duration-500" />
          </>
        )}
        {scale >= 50 && (
          <>
            <circle cx="50" cy="30" r="10" fill="#68D391" />
            <circle cx="45" cy="35" r="3" fill="#9AE6B4" />
            <circle cx="55" cy="35" r="3" fill="#9AE6B4" />
          </>
        )}
      </g>
    </svg>
  );
};

// Fantasy Tree
const FantasyTree = ({ 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 Q50 70 47 50 L53 50 Q50 70 55 90" fill="#8B4513" />
      <g>
        {scale >= 20 && (
          <>
            <circle cx="50" cy="40" r="18" fill="#48BB78" className="transition-all duration-500" />
            <circle cx="40" cy="45" r="12" fill="#38A169" className="transition-all duration-500" />
            <circle cx="60" cy="45" r="12" fill="#38A169" className="transition-all duration-500" />
          </>
        )}
        {scale >= 50 && (
          <>
            <circle cx="50" cy="30" r="12" fill="#68D391" />
            <circle cx="35" cy="40" r="8" fill="#68D391" />
            <circle cx="65" cy="40" r="8" fill="#68D391" />
          </>
        )}
        {scale >= 80 && (
          <>
            <circle cx="50" cy="25" r="3" fill="#9AE6B4" />
            <circle cx="43" cy="28" r="3" fill="#9AE6B4" />
            <circle cx="57" cy="28" r="3" fill="#9AE6B4" />
          </>
        )}
        {scale >= 95 && (
          <>
            <circle cx="40" cy="35" r="2" fill="#C6F6D5" />
            <circle cx="60" cy="35" r="2" fill="#C6F6D5" />
            <circle cx="50" cy="32" r="2" fill="#C6F6D5" />
          </>
        )}
      </g>
    </svg>
  );
};

const treeComponents = [
  SimpleTree,    // Most basic triangle tree
  RoundTree,     // Simple round tree
  HeartTree,     // Heart-shaped foliage
  CloudTree,     // Cloud-like foliage
  FantasyTree    // Most complex with multiple layers and sparkles
];