import React from 'react';
import type { SvgProps } from 'react-native-svg';
import { Path, Svg, G, Rect, Defs, ClipPath } from 'react-native-svg';
import { withTheme } from '../../../branding';

interface PlaceholderProps extends SvgProps {
    colors: {
        midnight750: string;
        midnight550: string;
        midnight450: string;
        [key: string]: any;
    };
    size?: number;
}

export const Placeholder = ({ colors, size = 100 }: PlaceholderProps) => {
    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 100 100"
            fill="none"
            testID="placeholderIcon"
        >
            <G clipPath="url(#clip0_1355_6015)">
                <Rect width={100} height={100} fill={colors.midnight750} />
                <Path
                    d="M40.8426 50.618L-25 100H141.667L42.588 50.4606C42.0233 50.1783 41.3477 50.2392 40.8426 50.618Z"
                    fill={colors.midnight550}
                />
                <Path
                    d="M2.77777 100L64.1759 53.9514C64.681 53.5726 65.3567 53.5117 65.9213 53.794L158.333 100H2.77777Z"
                    fill={colors.midnight450}
                />
                <Path
                    d="M63.3333 41.6667C63.3333 44.4281 61.0948 46.6667 58.3333 46.6667C55.5719 46.6667 53.3333 44.4281 53.3333 41.6667C53.3333 38.9053 55.5719 36.6667 58.3333 36.6667C61.0948 36.6667 63.3333 38.9053 63.3333 41.6667Z"
                    fill={colors.midnight450}
                />
            </G>
            <Defs>
                <ClipPath id="clip0_1355_6015">
                    <Rect width={100} height={100} fill="white" />
                </ClipPath>
            </Defs>
        </Svg>
    );
};

export default withTheme(Placeholder);