---
import { CircleCheck, XCircle } from 'lucide-react';

import Base from './Base.astro';

interface Props {
  title: string;
  description: string;
  variant: 'success' | 'error';
}

const { title, description, variant } = Astro.props;

const Icon = variant === 'success' ? CircleCheck : XCircle;
const iconClass = variant === 'error' ? 'text-red' : '';
---

<Base title={title} {description}>
  <main
    id="main-content"
    class="flex min-h-screen items-center justify-center p-6"
  >
    <div class="flex max-w-md flex-col items-center gap-4 text-center">
      <Icon size={48} className={iconClass} />
      <div>
        <h1 class="text-h4">{title}</h1>
        <p class="text-p1">{description}</p>
      </div>
      <div data-action-container class="invisible">
        <slot name="action" />
      </div>
    </div>
  </main>
</Base>
