import { AlertCircleIcon, RotateCwIcon } from 'lucide-react';

import { classNames } from '../../lib/utils';
import { Button } from '../ui/button';
import { Callout } from '../ui/callout';
import { TableCell, TableRow } from '../ui/table';

/**
 * A list that could not be read: what the server said, and a way to ask
 * again, instead of red text over a table that looks empty.
 *
 * @param props - Component props.
 * @param props.message - What went wrong.
 * @param props.onRetry - Read the list again.
 * @return The notice.
 */
export const ListError = ({
  message,
  onRetry,
}: {
  message: string;
  onRetry: () => void;
}): JSX.Element => (
  <Callout
    tone="danger"
    role="alert"
    className="flex flex-wrap items-center gap-3"
  >
    <AlertCircleIcon className="size-4 shrink-0 text-red-600" />
    <p className="min-w-0 flex-1 text-sm text-foreground">
      The list could not be read: {message}
    </p>
    <Button type="button" variant="outline" size="sm" onClick={onRetry}>
      <RotateCwIcon /> Try again
    </Button>
  </Callout>
);

/**
 * Rows standing in for a list on its way, so a table that is loading does
 * not read as an empty one.
 *
 * @param props - Component props.
 * @param props.cells - The class of each column's cell, so columns that
 * hide on narrow screens hide here too.
 * @param props.rows - How many rows.
 * @return The rows.
 */
export const SkeletonRows = ({
  cells,
  rows = 5,
}: {
  cells: string[];
  rows?: number;
}): JSX.Element => (
  <>
    {Array.from({ length: rows }, (_, row) => (
      <TableRow key={row} aria-hidden="true">
        {cells.map((cell, column) => (
          <TableCell key={column} className={cell}>
            <div
              className={classNames(
                'h-3.5 animate-pulse rounded bg-muted',
                column === 1 ? 'w-4/5' : (row + column) % 2 ? 'w-2/3' : 'w-1/2'
              )}
            />
          </TableCell>
        ))}
      </TableRow>
    ))}
  </>
);