// index.style.ts
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => {
  return {
    timelineItem: {
      marginBottom: '20px',
      boxShadow: token.boxShadow,
      borderRadius: token.borderRadius,
      transition: 'all 0.3s',
      cursor: 'pointer',
      '&:hover': {
        boxShadow: token.boxShadowSecondary,
      },
      position: 'relative',
      padding: '20px',
      maxWidth: '100%',
      textAlign: 'left',
      maxHeight: '80vh',
      scrollBehavior: 'smooth',
      scrollbarWidth: 'none',
      borderBottom: '1px solid #eee',
      [`@media (max-width: 768px)`]: {
        padding: '10px',
      },
    },
    actions: {
      display: 'flex',
      gap: '8px',
      alignItems: 'center',
      height: '24px',
      width: '120px',
    },
    content: {
      padding: '10px 0',
    },
    cover: {
      width: '100%',
      height: '200px',
      overflow: 'hidden',
      borderRadius: '4px',
      marginBottom: '15px',
      img: {
        width: '100%',
        height: '100%',
        objectFit: 'cover',
      },
    },
    date: {
      fontSize: '14px',
      color: token.colorTextSecondary,
      marginBottom: '10px',
      fontWeight: 'bold',
    },
    description: {
      fontSize: '16px',
      lineHeight: '1.6',
      color: token.colorText,
      marginBottom: '15px',
      '.ant-btn-link': {
        padding: '0 4px',
      },
    },
    subItems: {
      borderTop: `1px dashed ${token.colorBorder}`,
      paddingTop: '15px',
      marginTop: '15px',
    },
    subItemsHeader: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      cursor: 'pointer',
      fontWeight: 'bold',
      color: token.colorTextHeading,
      marginBottom: '10px',
      padding: '5px 0',
    },
    subItemsList: {
      maxHeight: '300px',
      overflowY: 'auto',
    },
    subItem: {
      display: 'flex',
      marginBottom: '10px',
      '&:last-child': {
        marginBottom: 0,
      },
    },
    subItemDate: {
      fontWeight: 'bold',
      minWidth: '100px',
      color: token.colorTextSecondary,
    },
    subItemContent: {
      flex: 1,
      color: token.colorText,
    },
    timelineItemImages: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: '10px',
      marginBottom: '20px',
    },
    timelineImage: {
      maxWidth: '100%',
      height: 'auto',
      borderRadius: '4px',
      overflow: 'hidden',
      img: {
        width: '100%',
        height: 'auto',
        objectFit: 'cover',
      },
    },
  };
});

export default useStyles;