---
interface Props {
    as?: keyof HTMLElementTagNameMap;
    class?: string;
    variant?: 'accent' | 'default' | 'subtle';
    [key: string]: unknown;
}

const { as = 'article', class: className = '', variant = 'default', ...rest } = Astro.props;

const variantClasses = {
    default: 'surface-card',
    accent: 'surface-card-accent',
    subtle: 'surface-card-muted',
};

const Tag = as;
---

<Tag
    class:list={['rounded-[1.65rem] p-6 sm:p-7', variantClasses[variant], className]}
    data-surface={variant}
    {...rest}
>
    <slot />
</Tag>