zapishis-client/apps/web/components/shared/status.tsx

import { Badge } from '@repo/ui/components/ui/badge';
import { cn } from '@repo/ui/lib/utils';
import { AlertCircle, Calendar, CheckCircle, FileText, Lock, Unlock, XCircle } from 'lucide-react';
import { type JSX } from 'react';

const BADGE_BY_STATE: Record<string, JSX.Element> = {
  approved: (
    <Badge
      className={cn(
        'bg-blue-100 text-blue-600 hover:bg-current',
        'dark:bg-blue-900 dark:text-blue-100',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Подтверждено
    </Badge>
  ),
  cancelled: (
    <Badge
      className={cn(
        'bg-red-100 text-red-600 hover:bg-current',
        'dark:bg-red-900 dark:text-red-100',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Отменено
    </Badge>
  ),
  cancelling: (
    <Badge
      className={cn(
        'bg-orange-100 text-orange-600 hover:bg-current',
        'dark:bg-orange-900 dark:text-orange-100',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Отменяется
    </Badge>
  ),
  closed: (
    <Badge
      className={cn(
        'bg-zinc-200 text-zinc-600 hover:bg-current',
        'dark:bg-zinc-800 dark:text-zinc-200',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Закрыто
    </Badge>
  ),
  completed: (
    <Badge
      className={cn(
        'bg-green-100 text-green-600 hover:bg-current',
        'dark:bg-green-900 dark:text-green-100',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Завершено
    </Badge>
  ),
  created: (
    <Badge
      className={cn('hover:bg-current', 'pointer-events-none select-none')}
      variant="secondary"
    >
      Создано
    </Badge>
  ),
  open: (
    <Badge
      className={cn(
        'bg-green-100 text-green-600 hover:bg-current',
        'dark:bg-green-700 dark:text-green-100',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Открыто
    </Badge>
  ),
  scheduled: (
    <Badge
      className={cn(
        'bg-purple-100 text-purple-600 hover:bg-current',
        'dark:bg-purple-900 dark:text-purple-100',
        'pointer-events-none select-none',
      )}
      variant="secondary"
    >
      Запланировано
    </Badge>
  ),
};

export function getBadge(state: string) {
  return BADGE_BY_STATE[state] ?? null;
}

function Alert({ className, ...props }: JSX.IntrinsicElements['div']) {
  return (
    <div className={cn('flex items-center gap-2 rounded-xl px-4 p-2', className)} {...props} />
  );
}

function AlertTitle({ className, ...props }: JSX.IntrinsicElements['span']) {
  return <span className={cn('line-clamp-1 font-medium tracking-tight', className)} {...props} />;
}

const ALERT_BY_STATE: Record<string, JSX.Element> = {
  approved: (
    <Alert className="bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200">
      <CheckCircle className="size-5 text-blue-600 dark:text-blue-400" />
      <AlertTitle>Подтверждено</AlertTitle>
    </Alert>
  ),
  cancelled: (
    <Alert className="bg-red-50 text-red-800 dark:bg-red-950 dark:text-red-200">
      <XCircle className="size-5 text-red-600 dark:text-red-400" />
      <AlertTitle>Отменено</AlertTitle>
    </Alert>
  ),
  cancelling: (
    <Alert className="bg-orange-50 text-orange-800 dark:bg-orange-950 dark:text-orange-200">
      <AlertCircle className="size-5 text-orange-600 dark:text-orange-400" />
      <AlertTitle>Ожидает отмены</AlertTitle>
    </Alert>
  ),
  closed: (
    <Alert className="bg-zinc-100 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">
      <Lock className="size-5 text-zinc-700 dark:text-zinc-300" />
      <AlertTitle>Закрыто</AlertTitle>
    </Alert>
  ),
  completed: (
    <Alert className="bg-green-50 text-green-800 dark:bg-green-950 dark:text-green-200">
      <CheckCircle className="size-5 text-green-600 dark:text-green-400" />
      <AlertTitle>Завершено</AlertTitle>
    </Alert>
  ),
  created: (
    <Alert className="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
      <FileText className="size-5 text-gray-600 dark:text-gray-400" />
      <AlertTitle>Создано</AlertTitle>
    </Alert>
  ),
  opened: (
    <Alert className="bg-cyan-50 text-cyan-800 dark:bg-cyan-950 dark:text-cyan-200">
      <Unlock className="size-5 text-cyan-600 dark:text-cyan-400" />
      <AlertTitle>Открыто</AlertTitle>
    </Alert>
  ),
  scheduled: (
    <Alert className="bg-purple-50 text-purple-800 dark:bg-purple-950 dark:text-purple-200">
      <Calendar className="size-5 text-purple-600 dark:text-purple-400" />
      <AlertTitle>Запланировано</AlertTitle>
    </Alert>
  ),
};

export function getAlert(state: string) {
  return ALERT_BY_STATE[state] ?? null;
}