---
import { Icon } from "../atoms/Icon";

interface Props {
  title: string;
  description?: string;
  icon?: string;
  layout?: "horizontal" | "vertical";
  action?: {
    label: string;
    href: string;
  };
}

const {
  title,
  description,
  icon = "Info",
  layout = "horizontal",
  action,
} = Astro.props;
---

<div class="card my-6 relative rounded-xl border border-border overflow-hidden">
  <div
    class={`p-4 lg:p-6 ${layout === "horizontal" ? "flex flex-col sm:flex-row items-start gap-4" : "flex flex-col gap-6"}`}
  >
    <Icon name={icon} size={24} className="text-foreground flex-shrink-0" />

    <div class="flex-1">
      <div class="flex flex-col gap-1">
        <span class="font-medium text-foreground text-base">{title}</span>
        {
          description && (
            <p class="text-muted-foreground text-sm !margin-0">{description}</p>
          )
        }
      </div>

      <slot />
    </div>

    {
      action && (
        <div class="flex items-center gap-3">
          <a
            href={action.href}
            class="text-primary hover:text-primary/80 text-sm no-underline flex items-center gap-1"
          >
            {action.label}
            <Icon name="ChevronRight" size={16} className="text-primary" />
          </a>
        </div>
      )
    }
  </div>
</div>
