import React from 'react';
import PropTypes from 'prop-types';

export default function CountryFlagIcon({ width = 25, height = 18, color = '#FF6C2D' }) {
  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_6527_2849)">
        <path
          d="M22.6429 0H2.60714C1.30533 0 0.25 1.07452 0.25 2.4V15.6C0.25 16.9255 1.30533 18 2.60714 18H22.6429C23.9447 18 25 16.9255 25 15.6V2.4C25 1.07452 23.9447 0 22.6429 0Z"
          fill="white"
        />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 0H8.125V18H0.25V0Z" fill="#249F58" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.125 0H25V18H17.125V0Z" fill={color} />
      </g>
      <defs>
        <clipPath id="clip0_6527_2849">
          <rect x="0.25" width="24.75" height="18" rx="2" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}

CountryFlagIcon.propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  color: PropTypes.string,
};
