import { Flex, TouchableOpacity } from '@/@dble_layout';

type Types = {
  iconSize?: number;
  onKakao?: () => void;
  onNaver?: () => void;
  onGoogle?: () => void;
  onApple?: () => void;
  onFacebook?: () => void;
  onGithub?: () => void;
};

export const OAuthTabs = ({ iconSize = 34, onKakao, onNaver, onGoogle, onApple, onFacebook, onGithub }: Types) => {
  return (
    <Flex direc='row' align='center' justify='center' wrap='wrap' gap={15}>
      {!!onKakao && (
        <TouchableOpacity as='button' onClick={onKakao}>
          <svg width={iconSize} height={iconSize} viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path
              d='M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z'
              fill='#FEE500'
            />
            <path
              d='M11 6.00094C8.23902 6.00094 6 7.91572 6 10.2778C6.03748 11.054 6.27456 11.8034 6.68449 12.4414C7.09441 13.0794 7.66085 13.5806 8.31986 13.8884L7.84886 15.7918C7.84009 15.8198 7.83881 15.85 7.84519 15.8788C7.85156 15.9076 7.86533 15.9338 7.88489 15.9545C7.90933 15.9819 7.9425 15.9981 7.97761 15.9998C8.01272 16.0016 8.04713 15.9888 8.07381 15.964L10.0993 14.4823C10.3976 14.5291 10.6986 14.553 11 14.5536C13.761 14.5536 16 12.6398 16 10.2768C16 7.91382 13.761 6.00094 11 6.00094Z'
              fill='#3C1E1E'
            />
          </svg>
        </TouchableOpacity>
      )}

      {!!onNaver && (
        <TouchableOpacity as='button' onClick={onNaver}>
          <svg width={iconSize} height={iconSize} viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path
              d='M22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11Z'
              fill='#03C75A'
            />
            <path
              d='M12.426 11.266L9.42599 6.966H6.93698V14.9969H9.543V10.697L12.543 14.9969H15.032V6.966H12.425L12.426 11.266Z'
              fill='white'
            />
          </svg>
        </TouchableOpacity>
      )}

      {!!onGoogle && (
        <TouchableOpacity as='button' onClick={onGoogle}>
          <svg width={iconSize} height={iconSize} viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path
              d='M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z'
              fill='#F2F2F2'
            />
            <path
              d='M16.882 11.135C16.8798 10.7539 16.8464 10.3736 16.782 9.99802H11.121V12.259H14.363C14.2921 12.6227 14.1494 12.9687 13.9434 13.2767C13.7374 13.5847 13.4721 13.8486 13.163 14.053V15.553H15.097C15.6864 14.982 16.1498 14.2939 16.4572 13.533C16.7647 12.7721 16.9093 11.9552 16.882 11.135Z'
              fill='#4285F4'
            />
            <path
              d='M11.1259 17.012C12.5879 17.0511 14.0093 16.5295 15.0989 15.554L13.1649 14.054C12.5583 14.4465 11.8483 14.6488 11.1259 14.635C10.3746 14.6257 9.64502 14.3809 9.04009 13.9351C8.43517 13.4893 7.98533 12.865 7.75395 12.15H5.75995V13.698C6.2586 14.6941 7.02468 15.5316 7.9724 16.1169C8.92012 16.7022 10.0121 17.0122 11.1259 17.012Z'
              fill='#34A853'
            />
            <path
              d='M7.75597 12.146C7.62893 11.777 7.56471 11.3893 7.56597 10.999C7.56718 10.609 7.63134 10.2216 7.75597 9.85202V8.30502H5.76197C5.33646 9.14139 5.11508 10.0666 5.11597 11.005C5.11508 11.9434 5.33646 12.8687 5.76197 13.705L7.75597 12.146Z'
              fill='#FBBC05'
            />
            <path
              d='M11.1259 7.36802C11.9809 7.35496 12.8069 7.67815 13.4259 8.26802L15.1389 6.55502C14.055 5.53219 12.6162 4.97035 11.1259 4.98801C10.0117 4.98814 8.91958 5.29853 7.97183 5.88438C7.02408 6.47023 6.25818 7.30841 5.75995 8.30502L7.75595 9.84901C7.98791 9.13514 8.43773 8.5119 9.0422 8.06689C9.64667 7.62188 10.3754 7.37747 11.1259 7.36802Z'
              fill='#EA4335'
            />
          </svg>
        </TouchableOpacity>
      )}

      {!!onApple && (
        <TouchableOpacity as='button' onClick={onApple}>
          <svg width={iconSize} height={iconSize} viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path
              d='M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z'
              fill='black'
            />
            <path
              d='M14.033 10.913C14.0396 10.4555 14.1623 10.0071 14.3897 9.61005C14.6171 9.21298 14.9417 8.88022 15.333 8.643C15.082 8.29009 14.7529 7.99996 14.3712 7.79527C13.9896 7.59058 13.5658 7.47687 13.133 7.463C12.199 7.363 11.309 8.009 10.833 8.009C10.357 8.009 9.62901 7.476 8.85401 7.49C8.34618 7.50379 7.85056 7.6487 7.4153 7.91066C6.98004 8.17263 6.61995 8.54273 6.37001 8.985C5.31101 10.809 6.09901 13.511 7.13001 14.992C7.63001 15.716 8.23701 16.529 9.03001 16.5C9.79001 16.47 10.078 16.011 10.997 16.011C11.916 16.011 12.175 16.5 12.979 16.485C13.783 16.47 14.315 15.746 14.816 15.021C15.1738 14.4972 15.4543 13.9247 15.649 13.321C15.1741 13.121 14.7681 12.7865 14.4809 12.3586C14.1938 11.9308 14.0381 11.4283 14.033 10.913Z'
              fill='white'
            />
            <path
              d='M12.508 6.546C12.9286 6.05282 13.1371 5.41331 13.088 4.767C12.4532 4.82818 11.866 5.13021 11.447 5.611C11.238 5.84394 11.0781 6.1165 10.9765 6.41249C10.875 6.70848 10.834 7.02185 10.856 7.334C11.1734 7.33839 11.4875 7.26958 11.774 7.13292C12.0605 6.99626 12.3117 6.79543 12.508 6.546Z'
              fill='white'
            />
          </svg>
        </TouchableOpacity>
      )}

      {!!onFacebook && (
        <TouchableOpacity as='button' onClick={onFacebook}>
          <svg width={iconSize} height={iconSize} viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path
              d='M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z'
              fill='#2D8DF9'
            />
            <path
              d='M14.035 10.986H12.077V17.598H9.11199V10.986H7.70099V8.662H9.11199V7.162C9.09483 6.77478 9.16243 6.38849 9.31008 6.03011C9.45773 5.67173 9.68186 5.34992 9.9668 5.08717C10.2517 4.82441 10.5906 4.62705 10.9598 4.50888C11.3289 4.39071 11.7194 4.35457 12.104 4.403L14.304 4.411V6.667H12.707C12.6222 6.6596 12.5368 6.67092 12.4568 6.70017C12.3769 6.72942 12.3043 6.77589 12.2443 6.83628C12.1843 6.89666 12.1383 6.9695 12.1096 7.04964C12.0808 7.12977 12.07 7.21524 12.078 7.3V8.668H14.294L14.035 10.986Z'
              fill='white'
            />
          </svg>
        </TouchableOpacity>
      )}

      {!!onGithub && (
        <TouchableOpacity as='button' onClick={onGithub}>
          <svg width={iconSize} height={iconSize} viewBox='0 0 22 23' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path
              d='M11 22.9885C17.0751 22.9885 22 18.0662 22 11.9943C22 5.9223 17.0751 1 11 1C4.92487 1 0 5.9223 0 11.9943C0 18.0662 4.92487 22.9885 11 22.9885Z'
              fill='white'
            />
            <path
              d='M22 11.9943C22.0021 9.93735 21.4269 7.92108 20.3397 6.17463C19.2525 4.42818 17.6969 3.02159 15.8497 2.11473C14.0025 1.20787 11.9379 0.837119 9.89037 1.04461C7.84288 1.25211 5.89468 2.02952 4.26722 3.2885C2.63976 4.54748 1.3983 6.23752 0.683944 8.16655C-0.0304101 10.0956 -0.189005 12.1862 0.226183 14.2008C0.641371 16.2154 1.61369 18.0733 3.03263 19.5631C4.45157 21.0529 6.26021 22.115 8.253 22.6287C8.33104 22.5291 8.37393 22.4064 8.375 22.2799C8.375 22.2506 8.37266 21.9864 8.368 21.4873C8.36333 20.9882 8.36033 20.5518 8.359 20.178L8.03 20.236C7.7673 20.2789 7.50103 20.296 7.235 20.2869C6.89942 20.2822 6.56487 20.2487 6.235 20.187C5.88417 20.12 5.55478 19.9691 5.275 19.7472C4.97922 19.5176 4.75965 19.2041 4.645 18.8477L4.5 18.5099C4.38017 18.2432 4.22876 17.9919 4.049 17.7613C3.88975 17.5275 3.67592 17.3361 3.426 17.2035L3.326 17.1296C3.25717 17.0786 3.19472 17.0195 3.14 16.9537C3.08676 16.892 3.04325 16.8226 3.011 16.7478C2.983 16.6788 3.006 16.6248 3.083 16.5789C3.21424 16.5246 3.3564 16.502 3.498 16.5129L3.778 16.5569C4.03495 16.627 4.27578 16.7465 4.487 16.9087C4.77413 17.1077 5.01327 17.3683 5.187 17.6713C5.37608 18.0369 5.65048 18.3516 5.987 18.5888C6.25993 18.7876 6.58735 18.8979 6.925 18.9047C7.19878 18.9084 7.47222 18.8839 7.741 18.8317C7.96377 18.7847 8.18001 18.7109 8.385 18.6118C8.43028 18.0407 8.67859 17.5046 9.085 17.1006C8.58957 17.0507 8.09877 16.9625 7.617 16.8367C7.14782 16.7016 6.6976 16.5079 6.277 16.26C5.83207 16.0123 5.44029 15.6795 5.124 15.2805C4.78195 14.8166 4.52714 14.2944 4.372 13.7394C4.16506 13.0251 4.06597 12.284 4.078 11.5405C4.05149 10.4251 4.45581 9.34237 5.207 8.51708C4.85515 7.54335 4.89095 6.47174 5.307 5.52364C5.72849 5.45454 6.16103 5.52472 6.539 5.72354C6.95298 5.88054 7.35417 6.06934 7.739 6.28824C7.99233 6.44549 8.19533 6.57876 8.348 6.68803C10.146 6.17951 12.05 6.17951 13.848 6.68803L14.392 6.33622C14.8093 6.07936 15.2503 5.86314 15.709 5.69055C16.068 5.51143 16.4758 5.4549 16.87 5.52964C17.2942 6.4744 17.335 7.5468 16.984 8.52108C17.7363 9.3459 18.1417 10.4287 18.116 11.5445C18.1271 12.2909 18.028 13.0348 17.822 13.7523C17.6681 14.3092 17.4106 14.832 17.063 15.2935C16.7417 15.6893 16.3481 16.0204 15.903 16.269C15.4804 16.516 15.0281 16.7085 14.557 16.8417C14.0754 16.9684 13.5845 17.0569 13.089 17.1066C13.3562 17.3797 13.5612 17.7073 13.6898 18.067C13.8184 18.4267 13.8676 18.81 13.834 19.1905V22.2889C13.8344 22.3944 13.8631 22.498 13.917 22.5887C16.2388 21.9505 18.2869 20.5684 19.747 18.6546C21.2072 16.7408 21.9986 14.401 22 11.9943Z'
              fill='#333333'
            />
          </svg>
        </TouchableOpacity>
      )}
    </Flex>
  );
};