---
import type { DownloadButton } from '@/types/shared';
import Typography from './typography.astro';

export interface Props extends DownloadButton {}

const { url, downloadedFileName, label } = Astro.props;

const classes = /* tw */ {
  main: 'inline-flex items-center px-4 h-10 rounded-md shadow-sm bg-primary-600 select-none cursor-pointer',
  hover: 'hover:bg-primary-700',
  active: 'active:translate-y-px',
  focus: 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
};

const className = Object.values(classes).join(' ');
---

<Typography variant="button" as="a" href={url} class={className} download={downloadedFileName}>
  {label}
</Typography>
