import React, { forwardRef } from 'react';
import { Heading } from '@/atoms/heading';
import { Button } from '@/atoms/button';
import { DropdownMenu } from '@/atoms/dropdown-menu';
import { Box } from '@/atoms/box';
import { Flex } from '@/atoms/flex';
import { Grid } from '@/atoms/grid';
import { Skeleton } from '@/atoms/skeleton';
import { Typo } from '@/atoms/typo';
import { DotsVerticalIcon } from '@/icon';
import { Card, Inset } from '@/atoms';

export interface ContentsCardProps {
  title?: React.ReactNode;
  description?: string;
  id?: string;
  imageSrc?: string | null;
  imageAlt?: string;
  footer?: React.ReactNode;
  dropdownItems?: {
    label: string;
    onClick: () => void;
  }[];
  onClickCard?: () => void;
  isLoading?: boolean;
}

export const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(
  (
    {
      title,
      description,
      imageSrc,
      footer,
      dropdownItems,
      onClickCard,
      isLoading = false,
    },
    ref
  ): React.ReactElement => {
    return (
      <Card
        onClick={onClickCard}
        ref={ref}
        style={{
          height: '100%',
          width: '100%',
          display: 'grid',
          cursor: 'pointer',
          maxHeight: '450px',
        }}
      >
        {/* 섬네일 */}
        <Inset clip="padding-box" pb="0" side="top">
          <Skeleton loading={isLoading}>
            <Box
              height="210px"
              style={{
                backgroundImage: `url(${imageSrc})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }}
              width="100%"
            />
          </Skeleton>
        </Inset>
        {/* 제목, 설명 */}
        <Flex direction="column" p="4" pb="3">
          <Box>
            <Skeleton loading={isLoading}>
              <Heading mb="3" variant="heading5">
                {title}
              </Heading>
            </Skeleton>
            <Skeleton loading={isLoading}>
              <Typo as="p" variant="caption">
                {description}
              </Typo>
            </Skeleton>
          </Box>
          <Grid
            align="center"
            columns="1fr auto"
            justify="between"
            pt="2"
            style={{ marginTop: 'auto' }}
            width="100%"
          >
            <Skeleton loading={isLoading}>
              <Flex gap="3" overflow="hidden">
                {footer}
              </Flex>
            </Skeleton>
            {Boolean(dropdownItems?.length) && (
              <DropdownMenu.Root>
                <DropdownMenu.Trigger>
                  <Button size="large" variant="transparent">
                    <DotsVerticalIcon color="gray" height="20px" width="20px" />
                  </Button>
                </DropdownMenu.Trigger>
                <DropdownMenu.Content>
                  {dropdownItems?.map((item) => (
                    <DropdownMenu.Item
                      key={item.label}
                      onClick={(e) => {
                        e.stopPropagation();
                        item.onClick();
                      }}
                    >
                      {item.label}
                    </DropdownMenu.Item>
                  ))}
                </DropdownMenu.Content>
              </DropdownMenu.Root>
            )}
          </Grid>
        </Flex>
      </Card>
    );
  }
);
ContentsCard.displayName = 'ContentsCard';
