import styled from 'styled-components';

import Tabs, { TabPane } from 'rc-tabs';

import { ThemeObject } from '../Theme';

export const StyledTabs = styled(Tabs).attrs((props: { $theme: ThemeObject; $hideBottomDivider: boolean }) => ({
  $theme: props.$theme,
  $hideBottomDivider: props.$hideBottomDivider,
}))`
  .rc-tabs-ink-bar {
    background-color: ${(props) => props.$theme.active ?? props.$theme.pallet.primaryColor};
    bottom: 0px;
    transition: all 0.25s;
  }
  .rc-tabs-nav-wrap {
    border-bottom: 1px solid ${(props) => (props.$hideBottomDivider ? 'transparent' : props.$theme.pallet.gray20)};
  }
`;

export const StyledTabPane = styled(TabPane).attrs((props: { $theme: ThemeObject; disabled: boolean }) => ({
  $theme: props.$theme,
  disabled: props.disabled,
}))`
  opacity: ${(props) => (props.disabled ? 0.6 : 1)} !important;
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'initial')} !important;
`;

export const StyledCloseButton = styled.div.attrs((props: { $theme: ThemeObject; $isActive: boolean }) => ({
  $theme: props.$theme,
  $isActive: props.$isActive,
}))`
  color: ${(props) => (props.$isActive ? props.$theme.active ?? props.$theme.pallet.primaryColor : props.$theme.text.secondary)};
  :hover {
    color: ${(props) => props.$theme.pallet.error};
  }
`;
