---
interface Props {
  href?: string;
  tone?: 'blue' | 'amber' | 'teal' | 'violet' | 'neutral';
  layout?: 'row' | 'grid' | 'stack';
  class?: string;
  target?: string;
  rel?: string;
}

const {
  href,
  tone = 'neutral',
  layout = 'grid',
  class: className = '',
  ...rest
} = Astro.props;

const classes = [
  'ui-info-tile',
  `ui-info-tile--${tone}`,
  `ui-info-tile--${layout}`,
  className,
].filter(Boolean).join(' ');
---

{href ? (
  <a href={href} class={classes} {...rest}>
    <slot />
  </a>
) : (
  <div class={classes} {...rest}>
    <slot />
  </div>
)}
