import type { ComponentProps } from 'react';

import { cn } from '@gib/ui';

type Message = { success: string } | { error: string } | { message: string };

interface StatusMessageProps {
  message: Message;
  containerProps?: ComponentProps<'div'>;
  textProps?: ComponentProps<'div'>;
}

export const StatusMessage = ({
  message,
  containerProps,
  textProps,
}: StatusMessageProps) => {
  return (
    <div className='flex w-full flex-col items-center'>
      {'success' in message && (
        <div
          {...containerProps}
          className={cn(
            'flex w-11/12 flex-col items-center rounded-md p-2',
            'border-2 bg-green-700/20 dark:bg-green-500/20',
            'border-green-700/50 dark:border-green-500/50',
            containerProps?.className,
          )}
        >
          <p {...textProps}>{message.success}</p>
        </div>
      )}
      {'error' in message && (
        <div
          {...containerProps}
          className={cn(
            'flex w-11/12 flex-col items-center rounded-md p-2',
            'bg-destructive/20 border-destructive/80 border-2',
            containerProps?.className,
          )}
        >
          <p {...textProps}>{message.error}</p>
        </div>
      )}
      {'message' in message && (
        <div
          {...containerProps}
          className={cn(
            'flex w-11/12 flex-col items-center rounded-md p-2',
            'bg-accent/20 border-primary/80 border-2',
            containerProps?.className,
          )}
        >
          <p {...textProps}>{message.message}</p>
        </div>
      )}
    </div>
  );
};