import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token, css }) => {
  return {
    container: css`
      width: 100%;
      height: 100%;
      background-color: ${token.colorBgContainer};
      border-radius: ${token.borderRadiusLG}px;
      overflow: hidden;
      box-shadow: ${token.boxShadowTertiary}; 
    `,

    layout: css`
      background: ${token.colorBgContainer};
      min-height: 600px;
    `,

    sider: css`
      border-right: 1px solid ${token.colorBorderSecondary};
      background: ${token.colorBgContainer} !important;
      
      .ant-layout-sider-children {
        display: flex;
        flex-direction: column;
      }
    `,

    siderContent: css`
      padding: 24px 0;
      height: 100%;
      overflow-y: auto;
    `,

    profileSection: css`
      padding: 0 24px 24px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border-bottom: 1px solid ${token.colorBorderSecondary};
      
      /* When collapsed, we might want to adjust or hide parts */
    `,

    avatar: css`
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      border: 1px solid ${token.colorBorderSecondary};
    `,

    profileInfo: css`
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
      overflow: hidden;
    `,

    profileName: css`
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: ${token.colorTextHeading};
    `,

    profileEmail: css`
      font-size: 13px;
      color: ${token.colorTextSecondary};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    `,

    menu: css`
      border-inline-end: none !important;
      
      .ant-menu-item {
        margin: 4px 12px !important;
        width: calc(100% - 24px) !important;
        border-radius: ${token.borderRadius}px;
        color: ${token.colorTextSecondary};
        
        &-selected {
          background-color: ${token.colorFillTertiary} !important;
          color: ${token.colorTextHeading} !important;
          font-weight: 500;
        }

        &:hover {
          color: ${token.colorTextHeading} !important;
        }
      }
    `,

    content: css`
      background: ${token.colorBgContainer};
      padding: 0;
      display: flex;
      flex-direction: column;
    `,

    contentHeader: css`
      padding: 24px 40px;
      border-bottom: 1px solid ${token.colorBorderSecondary};
    `,

    contentBody: css`
      flex: 1;
      padding: 32px 40px;
      overflow-y: auto;
    `,
  };
});

export default useStyles;
