import { AlertTriangle } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert'
import { Button } from '~/components/ui/button'

type Props = {
  error: Error
  reset?: () => void
}

export function ErrorState({ error, reset }: Props) {
  return (
    <Alert variant="destructive" className="my-3 rounded-md py-10">
      <div className="flex flex-col items-center gap-2 text-center">
        <AlertTriangle className="h-8 w-8" />
        <AlertTitle className="mt-4 text-lg">Something went wrong</AlertTitle>
        <AlertDescription className="max-w-sm">{error.message}</AlertDescription>
        {reset && (
          <Button variant="outline" size="sm" onClick={reset} className="mt-3">
            Try again
          </Button>
        )}
      </div>
    </Alert>
  )
}