import Svg, { Circle, Defs, FeDropShadow, Filter, G, LinearGradient, Path, Stop, Text } from "react-native-svg";

export default function Logo({ size = 200 }: { size?: number }) {
  return (
    <Svg
      width={size}
      height={(size * 100) / 450} // proporción aproximada del original
      viewBox="0 0 350 100"
    >
    <Defs>
      <LinearGradient id="orangeGradient" x1="0" y1="0" x2="1" y2="1">
        <Stop offset="0" stopColor="#FF8C42" />
        <Stop offset="1" stopColor="#D84315" />
      </LinearGradient>
    
      {/* Shadow filter */}
      <Filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
        <FeDropShadow
          dx="0"
          dy="4"
          stdDeviation="6"
          floodColor="#000000"
          floodOpacity="0.25"
        />
      </Filter>
    </Defs>

      {/* Bandeja */}
      <G transform="translate(15,35)">
        <Path d="M0 40 a40 20 0 0 1 80 0 z" fill="url(#orangeGradient)" />
        <Path d="M10 40 a30 15 0 0 1 60 0" fill="#fff6ef" />
        <Circle cx="40" cy="25" r="4" fill="#D84315" />
      </G>

      {/* Texto SmartBar */}
      <Text
        x={115}
        y={75}
        fontSize={42}
        fontWeight="700"
        fill="#4b4b4bff"
      >
        Smart
      </Text>
      <Text
        x={260}
        y={75}
        fontSize={42}
        fontWeight="800"
        fill="url(#orangeGradient)"
      >
        Bar
      </Text>
    </Svg>
  );
}
