import * as React from 'react';
import { KakaoSymbolIcon } from './icons/kakao-symbol';
import { AppleSymbolIcon } from './icons/apple-symbol';
import { GoogleSymbolIcon } from './icons/google-symbol';
import Button from './button';

type SocialButtonType = 'kakao' | 'apple' | 'google';

interface SocialButtonPreset {
  backgroundColor: string;
  textColor: string;
  icon: React.ReactNode;
  text: string;
  border?: string;
}

const SOCIAL_PRESETS: Record<SocialButtonType, SocialButtonPreset> = {
  kakao: {
    backgroundColor: 'yellow-400',
    textColor: 'black',
    icon: <KakaoSymbolIcon />,
    text: '카카오톡으로 시작하기',
  },
  apple: {
    backgroundColor: 'black',
    textColor: 'white',
    icon: <AppleSymbolIcon />,
    text: '애플로 시작하기',
  },
  google: {
    backgroundColor: 'white',
    textColor: 'black',
    icon: <GoogleSymbolIcon />,
    text: '구글로 시작하기',
  },
};

interface SocialButtonProps {
  type: SocialButtonType;
  onPress: () => void;
  disabled?: boolean;
  loading?: boolean;
  className?: string;
}

export default function SocialButton({
  type,
  onPress,
  disabled,
  loading,
  className,
}: SocialButtonProps) {
  const preset = SOCIAL_PRESETS[type];

  return (
    <Button
      disabled={disabled}
      border={
        type === 'google'
          ? { borderWidth: '1', borderColor: 'gray-300' }
          : { borderWidth: '0', borderColor: 'transparent' }
      }
      loading={loading}
      text={preset.text}
      backgroundColor={preset.backgroundColor}
      textColor={preset.textColor}
      radius="rounded-xl"
      onPress={onPress}
      className={className}
      leftIcon={{
        icon: preset.icon,
        gap: 8,
      }}
    />
  );
}