import Svg, { Defs, LinearGradient, Path, Rect, Stop, Text } from 'react-native-svg';

const CardBg = (prop: { pro: string, date: string }) => {
    const { pro, date } = prop;
    return (
        <Svg width="376" height="124" viewBox="0 44.9 376 124.1" fill="none">
            {pro === "pro" && <Path d="M286.349 53.467L292.529 44.9033H320.021L311.337 51.2785L284.133 56.0518L286.349 53.467Z" fill="#E0A241" />}
            {pro === "pro" && <Path d="M367.546 122.188L363.914 116.368C363.798 116.183 363.714 115.98 363.664 115.768L362.749 111.887C362.722 111.77 362.684 111.657 362.636 111.547L362.079 110.266C361.211 108.273 363.698 106.522 365.282 108.01L375.138 117.274L370.767 122.424C369.891 123.457 368.263 123.338 367.546 122.188Z" fill="#E0A241" />}
            <Rect x="1.17188" y="48.8311" width="370" height="120" rx="34" fill="#4C320C" />
            <Path opacity="0.24" d="M1 118.031C1.66058 99.3464 16.3302 58.9993 68.3782 57.5584C116.841 56.2168 170.195 82.5409 173.692 84.0733C186.432 89.6553 254.376 122.217 310.713 107.564C355.783 95.8421 366.107 67.6372 365.635 55M1 128.238C31.3602 124.142 111.645 120.135 189.904 136.872C268.164 153.61 343.243 153.145 371 150.821" stroke="white" stroke-width="1.5" />
            <Path d="M175.398 56.0518C175.398 56.0518 175.916 62.7711 177.936 64.7908C179.956 66.8105 184.795 67.329 184.795 67.329C184.795 67.329 179.956 67.8475 177.936 69.8672C175.916 71.8869 175.398 74.8472 175.398 74.8472C175.398 74.8472 174.879 71.8869 172.859 69.8672C170.84 67.8475 166 67.329 166 67.329C166 67.329 170.84 66.8105 172.859 64.7908C174.879 62.7711 175.398 56.0518 175.398 56.0518Z" fill="#FFB645" />
            <Path d="M149.929 54.0527C149.929 54.0527 150.816 65.5433 154.27 68.9971C157.724 72.451 166 73.3377 166 73.3377C166 73.3377 157.724 74.2244 154.27 77.6783C150.816 81.1321 149.929 86.1943 149.929 86.1943C149.929 86.1943 149.042 81.1321 145.589 77.6783C142.135 74.2244 133.858 73.3377 133.858 73.3377C133.858 73.3377 142.135 72.451 145.589 68.9971C149.042 65.5433 149.929 54.0527 149.929 54.0527Z" fill="#FFB645" />
            <Path d="M181.214 75.7812C181.214 75.7812 181.92 84.9229 184.668 87.6707C187.415 90.4186 194 91.124 194 91.124C194 91.124 187.415 91.8295 184.668 94.5773C181.92 97.3251 181.214 101.353 181.214 101.353C181.214 101.353 180.509 97.3251 177.761 94.5773C175.013 91.8295 168.429 91.124 168.429 91.124C168.429 91.124 175.013 90.4186 177.761 87.6707C180.509 84.9229 181.214 75.7812 181.214 75.7812Z" fill="#FFB645" />
            {/* 背景色块 */}
            {pro === "pro" && <Path d="M292.495 44.8398H319.859L375.141 93.3921V117.295L292.495 44.8398Z" fill="#FFC56A" />}

            {/* 叠加文字 */}
            {
                pro === "pro" && <Text
                    x={340}
                    y={75}
                    dy={3.5}
                    textAnchor="middle"
                    fontSize="11"
                    fontWeight="600"
                    fill="#4C320C"
                    fontFamily="sans-serif"
                    transform={`rotate(40.4 ${340} ${75})`}
                >
                    {date}
                </Text>
            }

            {/* 渐变定义（放在最后，避免覆盖） */}
            <Defs>
                <LinearGradient id="paint0_linear_0_1" x1="26" y1="72.5" x2="106.717" y2="129.81" gradientUnits="userSpaceOnUse">
                    <Stop stop-color="white" />
                    <Stop offset="1" stop-color="#FFE064" />
                </LinearGradient>
                <LinearGradient id="paint1_linear_0_1" x1="30.4844" y1="134.396" x2="141.612" y2="134.396" gradientUnits="userSpaceOnUse">
                    <Stop stop-color="#D0BFB0" />
                    <Stop offset="0.405582" stop-color="#FFE57D" />
                    <Stop offset="1" stop-color="white" />
                </LinearGradient>
                <LinearGradient id="paint2_linear_0_1" x1="100.511" y1="78.9371" x2="164.522" y2="104.117" gradientUnits="userSpaceOnUse">
                    <Stop stop-color="#FFF3E8" />
                    <Stop offset="1" stop-color="#FFFAB9" />
                </LinearGradient>
            </Defs>
        </Svg>
    )
}

export default CardBg