import React from 'react';
import { Badge } from '@/atoms/badge';
import { Box } from '@/atoms/box';
import { Grid } from '@/atoms/grid';
import { Heading } from '@/atoms/heading';
import { Typo } from '@/atoms/typo';
import { Separator } from '@/atoms/separator';
import { Flex } from '@/atoms/flex';
import { ArrowRightIcon, TimerIcon } from '@/icon';

export interface CurriculumCardProps {
  title?: string;
  imgTitle?: string;
  imgSrc?: string;
  description?: string[];
  runningTime?: string;
  bgColor?: string;
  onClick?: () => void;
}

export function CurriculumCard(props: CurriculumCardProps): React.ReactNode {
  const {
    title,
    imgTitle,
    imgSrc,
    description,
    runningTime,
    bgColor,
    onClick,
  } = props;
  return (
    <Grid
      columns={{ initial: '1', sm: '275px 1fr' }}
      gapX="5"
      gapY="2"
      onClick={onClick}
      style={{ cursor: 'pointer' }}
    >
      {/* 섬네일 */}
      <Box
        height="165px"
        p="3"
        style={{
          backgroundImage: `url(${imgSrc})`,
          backgroundColor: bgColor,
          backgroundPositionX: 'right',
          backgroundPositionY: 'bottom',
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'contain',
          backgroundAttachment: 'local',
        }}
        width="100%"
      >
        <Heading style={{ whiteSpace: 'break-spaces' }} variant="heading3">
          {imgTitle}
        </Heading>
      </Box>
      {/* 텍스트 */}
      <Flex direction="column" gap="3">
        {/* 제목 */}
        <Grid columns={{ initial: '1', xs: '1fr auto' }} gapY="3">
          <Heading variant="heading4">{title}</Heading>
          <Badge
            size="medium"
            style={{ justifySelf: 'flex-start' }}
            variant="outline"
          >
            <Flex align="center" gap="1">
              <TimerIcon />
              {runningTime}
            </Flex>
          </Badge>
        </Grid>
        {/* 설명 */}
        <Box style={{ marginBottom: 'auto' }}>
          <ul style={{ margin: 0, paddingLeft: 20 }}>
            {description?.map((el) => {
              return (
                <li key={el} style={{ marginBottom: 8 }}>
                  <Heading truncate variant="heading5" weight="regular">
                    {el}
                  </Heading>
                </li>
              );
            })}
          </ul>
        </Box>
        <Separator size="4" />
        <Flex align="center" gap="2" justify="end">
          <Typo color="gray">강의 듣고 코치님과 무제한 Q&A</Typo>
          <ArrowRightIcon color="gray" />
        </Flex>
      </Flex>
    </Grid>
  );
}
