import React from 'react';
import { DownloadIcon } from '@radix-ui/react-icons';
import { Link } from '@/atoms/link';
import { Typo } from '@/atoms/typo';
import { Flex } from '@/atoms/flex';
import { IconButton } from '@/atoms/icon-button';

export interface Attachment {
  fileName: string;
  url: string;
  createdAt?: Date;
  size?: string;
}

export function DownloadCard({
  fileName,
  url,
  createdAt,
  size,
}: Attachment): React.ReactNode {
  return (
    <Link download={fileName} href={url} key={createdAt?.valueOf() + fileName}>
      <IconButton
        mt="3"
        size="4"
        style={{ width: '100%', height: 56 }}
        variant="soft"
      >
        <Flex align="center" gap="3" pl="4" width="100%">
          <Typo color="gray">
            <DownloadIcon height={20} width={20} />
          </Typo>
          <Flex align="start" direction="column" gap="1">
            <Typo
              style={{
                color: 'var(--gray-12)',
              }}
              variant="caption"
            >
              {fileName}
            </Typo>
            <Typo color="gray" variant="caption">
              {size}
            </Typo>
          </Flex>
        </Flex>
      </IconButton>
    </Link>
  );
}
