import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    keyframes: {
      slideUpFadeOut: {
        '0%': { transform: 'translateY(0)', opacity: '100' },
        '90%': { transform: 'translateY(-90%)', opacity: '100' },
        '100%': { transform: 'translateY(-100%)', opacity: '0' },
      },
      slideDownFadeOut: {
        '0%': { transform: 'translateY(-100%)', opacity: '100' },
        '90%': { transform: 'translateY(-10%)', opacity: '100' },
        '100%': { transform: 'translateY(0)', opacity: '0' },
      },
    },
    animation: {
      slideUpFadeOut: 'slideUpFadeOut 1s ease-in-out forwards',
      slideDownFadeOut: 'slideDownFadeOut 1s ease-in-out forwards',
    },
  },
  plugins: [],
};

export default config;

type Props = {
  children: React.ReactNode;
  direction: 'up' | 'down';
};

export default function Toast({ children, direction = 'up' }: Props) {
  if (direction === 'down') {
    return (
      <div className="fixed bottom-0 z-50 flex h-20 w-32 animate-slideDownFadeOut items-center justify-center rounded-lg bg-yellow">
        <span className="text-xl font-bold leading-xl text-black_100">{children}</span>
      </div>
    );
  }

  return (
    <div className="fixed bottom-0 z-50 flex h-20 w-32 animate-slideUpFadeOut items-center justify-center rounded-lg bg-blue">
      <span className="text-xl font-bold leading-xl text-white_100">{children}</span>
    </div>
  );
}

export default function ToastMachine() {
  const [upToast, setUpToast] = useState(false);
  const [downToast, setDownToast] = useState(false);

  return (
    <>
      {upToast && <Toast direction="up">스크랩 완료!</Toast>}
      {downToast && <Toast direction="down">스크랩 취소!</Toast>}
    </>
  );
}