import * as React from "react"
import Svg, {
    SvgProps,
    Defs,
    LinearGradient,
    Stop,
    Pattern,
    Path,
    G,
    Rect,
    Ellipse,
    Circle,
    Text,
    TSpan,
} from "react-native-svg"
/* SVGR has dropped some elements not supported by react-native-svg: style */
const SvgComponent = (props: SvgProps) => (
    <Svg width={400} height={650} {...props}>
        <Defs>
            <LinearGradient id="card-grad" x1="0%" x2="0%" y1="0%" y2="100%">
                <Stop offset="0%" stopColor="#fdfbf5" />
                <Stop offset="50%" stopColor="#faf4e6" />
                <Stop offset="100%" stopColor="#f7eed8" />
            </LinearGradient>
            <LinearGradient id="oven-fire" x1="0%" x2="0%" y1="100%" y2="0%">
                <Stop offset="0%" stopColor="#c0392b" />
                <Stop offset="50%" stopColor="#e67e22" />
                <Stop offset="100%" stopColor="#f1c40f" />
            </LinearGradient>
            <LinearGradient id="wine-grad" x1="0%" x2="0%" y1="0%" y2="100%">
                <Stop offset="0%" stopColor="#7b1123" />
                <Stop offset="100%" stopColor="#4a0512" />
            </LinearGradient>
            <Pattern
                id="checkered-border"
                width={20}
                height={20}
                patternUnits="userSpaceOnUse"
            >
                <Path fill="#b92b27" d="M0 0h20v20H0z" />
                <Path fill="#fdf8ee" d="M0 0h10v10H0zm10 10h10v10H10z" />
            </Pattern>
        </Defs>
        <Path
            id="layer-background"
            fill="url(#checkered-border)"
            d="M0 0h400v650H0z"
        />
        <G id="layer-card">
            <Rect
                width={356}
                height={606}
                x={22}
                y={22}
                fill="url(#card-grad)"
                stroke="#b92b27"
                strokeWidth={2}
                rx={20}
            />
            <Rect
                width={344}
                height={594}
                x={28}
                y={28}
                fill="none"
                stroke="#8c6239"
                strokeOpacity={0.5}
                strokeWidth={0.8}
                rx={15}
            />
            <Rect
                width={140}
                height={24}
                x={130}
                y={34}
                fill="#faf4e6"
                stroke="#8c6239"
                strokeWidth={1.2}
                rx={12}
            />
        </G>
        <G id="layer-icons">
            <Path
                fill="none"
                stroke="#c5a880"
                strokeLinecap="round"
                strokeWidth={1.5}
                d="M68 88q12-13 28-2 6 5 10 2m226 0q-12-13-28-2-6 5-10 2"
            />
            <G id="pizza-oven" transform="translate(200 192)">
                <Rect
                    width={88}
                    height={6}
                    x={-44}
                    fill="#d7ccc8"
                    stroke="#5d4037"
                    rx={2}
                />
                <Path
                    fill="#d7ccc8"
                    stroke="#5d4037"
                    strokeWidth={1.5}
                    d="M-40 0a40 38 0 0 1 80 0Z"
                />
                <Path
                    stroke="#8d6e63"
                    d="m-30-25 7 6m6-15 4 8M0-38v9m17-5-4 8m17 1-7 6"
                />
                <Path fill="#3e2723" stroke="#271c19" d="M-28 0a28 26 0 0 1 56 0Z" />
                <Path
                    fill="url(#oven-fire)"
                    d="M-18 0q3-16 12-10 6-12 12-2 9-6 12 12Z"
                />
                <Path fill="#fff9c4" d="M-10 0q5-10 10-6 5-6 10 6Z" />
            </G>
            <G id="left-ingredients" transform="translate(108 185)">
                <Ellipse
                    cx={-16}
                    cy={6}
                    fill="#d32f2f"
                    stroke="#8e0000"
                    strokeWidth={0.8}
                    rx={14}
                    ry={10}
                    transform="rotate(-25 -16 6)"
                />
                <Ellipse
                    cx={-16}
                    cy={6}
                    fill="#e53935"
                    rx={10}
                    ry={6.5}
                    transform="rotate(-25 -16 6)"
                />
                <Ellipse
                    cx={2}
                    cy={7}
                    fill="#c62828"
                    stroke="#8e0000"
                    strokeWidth={0.8}
                    rx={13}
                    ry={9}
                    transform="rotate(-10 2 7)"
                />
                <Ellipse
                    cx={2}
                    cy={7}
                    fill="#e53935"
                    rx={9}
                    ry={5.5}
                    transform="rotate(-10 2 7)"
                />
                <Circle cx={2} cy={7} r={1.5} fill="#fdd835" />
                <Circle
                    cx={16}
                    cy={-2}
                    r={14}
                    fill="#e53935"
                    stroke="#b71c1c"
                    strokeWidth={0.8}
                />
                <Ellipse cx={12} cy={-6} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
                <Path
                    stroke="#2e7d32"
                    strokeLinecap="round"
                    strokeWidth={1.5}
                    d="M16-16v3m0 0-5 2m5-2 5 2m-5-2-3-2m3 2 3-2"
                />
            </G>
            <G id="right-ingredients" transform="translate(290 182)">
                <Circle
                    cx={-14}
                    cy={2}
                    r={15}
                    fill="#e53935"
                    stroke="#b71c1c"
                    strokeWidth={0.8}
                />
                <Ellipse cx={-18} cy={-3} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
                <Path
                    stroke="#2e7d32"
                    strokeLinecap="round"
                    strokeWidth={1.5}
                    d="M-14-13v3m0 0-4 2m4-2 4 2"
                />
                <Path
                    fill="#2e7d32"
                    stroke="#1b5e20"
                    strokeWidth={0.8}
                    d="M-2 0C8-16 26-12 24 2 22 14 6 10-2 0Z"
                />
                <Path
                    fill="none"
                    stroke="#4caf50"
                    strokeWidth={0.7}
                    d="M-2 0q14-4 26 2"
                />
                <Path
                    fill="#388e3c"
                    stroke="#1b5e20"
                    strokeWidth={0.8}
                    d="M8 6c10-6 24 4 18 16-8 6-18-4-18-16Z"
                />
                <Path
                    fill="none"
                    stroke="#81c784"
                    strokeWidth={0.7}
                    d="M8 6q12 6 18 16"
                />
            </G>
            <G id="footer-pizza-slice" transform="rotate(-10 3278.565 44.969)">
                <Path
                    fill="#deac68"
                    stroke="#8d6e63"
                    strokeWidth={1.2}
                    d="m0 0 46-18c4 8 6 32 0 40Z"
                />
                <Path fill="#fbc02d" d="m2 0 40-15c3 7 5 25 0 33Z" />
                <Circle
                    cx={28}
                    cy={-5}
                    r={5}
                    fill="#c62828"
                    stroke="#8e0000"
                    strokeWidth={0.8}
                />
                <Circle
                    cx={32}
                    cy={8}
                    r={4.5}
                    fill="#c62828"
                    stroke="#8e0000"
                    strokeWidth={0.8}
                />
                <Circle
                    cx={16}
                    r={3.5}
                    fill="#c62828"
                    stroke="#8e0000"
                    strokeWidth={0.8}
                />
                <Ellipse
                    cx={23}
                    cy={4}
                    fill="#2e7d32"
                    rx={2}
                    ry={4}
                    transform="rotate(30 23 4)"
                />
                <Ellipse
                    cx={34}
                    cy={-11}
                    fill="#2e7d32"
                    rx={2}
                    ry={3}
                    transform="rotate(-40 34 -11)"
                />
            </G>
            <G id="footer-wine-glass" transform="translate(345 562)">
                <Path
                    fill="none"
                    stroke="#71717a"
                    strokeWidth={1.2}
                    d="M-14-24C-15-8-11 4 0 6 11 4 15-8 14-24Z"
                />
                <Path
                    fill="url(#wine-grad)"
                    d="M-13-12C-11 0-7 4 0 5.5 7 4 11 0 13-12Z"
                />
                <Ellipse cy={-12} fill="#991b1b" rx={13} ry={2} />
                <Path stroke="#71717a" strokeWidth={1.4} d="M0 6v22" />
                <Ellipse
                    cy={28}
                    fill="#e4e4e7"
                    stroke="#71717a"
                    strokeWidth={1.2}
                    rx={11}
                    ry={2}
                />
                <Path
                    fill="none"
                    stroke="#fff"
                    strokeLinecap="round"
                    d="M-10-20c-2 8 1 18 6 23"
                    opacity={0.6}
                />
            </G>
            <G id="qr-corner-accents">
                <Path
                    fill="none"
                    stroke="#2e7d32"
                    strokeLinecap="round"
                    strokeWidth={3}
                    d="M78 227v-22h22"
                />
                <Path
                    fill="none"
                    stroke="#b92b27"
                    strokeLinecap="round"
                    strokeWidth={3}
                    d="M322 227v-22h-22M78 423v22h22"
                />
                <Path
                    fill="none"
                    stroke="#2e7d32"
                    strokeLinecap="round"
                    strokeWidth={3}
                    d="M322 423v22h-22"
                />
            </G>
        </G>
        <G id="qr-placeholder" transform="translate(90 215)">
            <Rect
                width={220}
                height={220}
                fill="#fff"
                stroke="#e4e4e7"
                strokeWidth={2}
                rx={20}
            />
            <Rect
                width={196}
                height={196}
                x={12}
                y={12}
                fill="#fafafa"
                stroke="#e4e4e7"
                strokeDasharray="4 3"
                rx={14}
            />
            <Text
                x={110}
                y={115}
                fill="#71717a"
                dominantBaseline="middle"
                fontFamily='"Inter",Arial,sans-serif'
                fontSize={12}
                fontWeight={700}
                letterSpacing={0.5}
                textAnchor="middle"
            >
                {"QR KOD ALANI"}
            </Text>
        </G>
        <G id="layer-texts">
            <Text
                x={200}
                y={50}
                fill="#18181b"
                fontFamily='"Inter",Arial,sans-serif'
                fontSize={11}
                fontWeight={800}
                letterSpacing={1.2}
                textAnchor="middle"
            >
                {"MASA NO: 01"}
            </Text>
            <Text
                x={200}
                y={96}
                className="font-brand-arc"
                fontSize={24}
                textAnchor="middle"
            >
                {"PIZZERIA"}
            </Text>
            <Text
                x={200}
                y={132}
                className="font-brand-arc"
                fontSize={31}
                letterSpacing={1}
                textAnchor="middle"
            >
                {"BELLA NAPOLI"}
            </Text>
            <Text
                x={200}
                y={222}
                fill="#2e7d32"
                fontFamily='"Inter",Arial,sans-serif'
                fontSize={11.5}
                fontWeight={800}
                letterSpacing={1.8}
                textAnchor="middle"
            >
                {"AUTENTICA CUCINA ITALIANA"}
            </Text>
            <Text x={200} y={474} className="font-cta" textAnchor="middle">
                {"MEN\xDCY\xDC G\xD6RMEK"}
            </Text>
            <Text x={200} y={494} className="font-cta" textAnchor="middle">
                {"\u0130\xC7\u0130N OKUTUN"}
            </Text>
            <Text x={200} y={546} textAnchor="middle">
                <TSpan className="font-footer-bold">{"WiFi: "}</TSpan>
                <TSpan className="font-footer-reg">{"GourmetBistro"}</TSpan>
                <TSpan fill="#a1a1aa" className="font-footer-reg">
                    {"   |   "}
                </TSpan>
                <TSpan className="font-footer-bold">{"\u015Eifre: "}</TSpan>
                <TSpan className="font-footer-reg">{"lezzetli01"}</TSpan>
            </Text>
            <Text x={200} y={570} textAnchor="middle">
                <TSpan fill="#b92b27" className="font-footer-bold">
                    {"B\u0130Z\u0130 TAK\u0130P ED\u0130N"}
                </TSpan>
                <TSpan fill="#a1a1aa" className="font-footer-reg">
                    {"   |   "}
                </TSpan>
                <TSpan className="font-footer-reg">{"@gourmetbistro"}</TSpan>
            </Text>
        </G>
    </Svg>
)
export default SvgComponent