import { NOTIFICATION_TYPE } from '@/types/enum';
import { cn } from '@lib/utils';
import { m } from '@paraglide/messages';
import { Item, ItemHeader } from '@ui/item';
import { cva, VariantProps } from 'class-variance-authority';
import NotificationInvitation from './notification-type/invitation';

type NotifyProps = {
  notify: NotificationWithUser;
};

const notifyVariants = cva('bg-linear-to-br shadow-xs', {
  variants: {
    variant: {
      invitation: 'to-gray-50 from-teal-50',
      system: '',
      error: '',
      house: '',
      expired: '',
    },
  },
  defaultVariants: {
    variant: 'invitation',
  },
});

const NotificationItem = ({
  className,
  notify,
  ...props
}: NotifyProps & React.ComponentProps<'div'>) => {
  return (
    <Item
      variant="outline"
      className={cn(
        notifyVariants({
          variant: notify.type as VariantProps<
            typeof notifyVariants
          >['variant'],
          className,
        }),
      )}
      {...props}
    >
      <ItemHeader>
        {m.templates_title_notification({
          title: notify.title as Parameters<
            typeof m.templates_title_notification
          >[0]['title'],
        })}
      </ItemHeader>
      {notify.type === NOTIFICATION_TYPE.INVITATION && (
        <NotificationInvitation notify={notify} />
      )}
    </Item>
  );
};

export default NotificationItem;
