import styled, { css } from 'styled-components';
import { ResponsiveConfig } from './types';
export const breakpoints = {
  xs: '0px',
  sm: '520px',
  md: '768px',
  lg: '1024px',
  xl: '1320px'
};

export const colors = {
  primary: '#005C8A',
  white: '#FFFFFF'
};

export const ItemContainer = styled.div<{
  widthItemConfig?: ResponsiveConfig;
  maxWidthItemConfig?: ResponsiveConfig;
}>`
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-self: stretch;

  ${props => {
    if (!props.widthItemConfig) {
      return '';
    }
    const { xs, mobile, tablet, desktop, xl } = props.widthItemConfig;
    return css`
      ${xs && `flex: 0 0 ${xs};`}
      ${mobile &&
        `
        @media (min-width: ${breakpoints.sm}) {
          flex: 0 0 ${mobile};
        }
      `}
      ${tablet &&
        `
        @media (min-width: ${breakpoints.md}) {
          flex: 0 0 ${tablet};
        }
      `}
      ${desktop &&
        `
        @media (min-width: ${breakpoints.lg}) {
          flex: 0 0 ${desktop};
        }
      `}
      ${xl &&
        `
        @media (min-width: ${breakpoints.xl}) {
          flex: 0 0 ${xl};
        }
      `}
    `;
  }} ${props => {
    if (!props.maxWidthItemConfig) {
      return '';
    }
    const { xs, mobile, tablet, desktop, xl } = props.maxWidthItemConfig;
    return css`
      ${xs && `max-width: ${xs};`}
      ${mobile &&
        `
        @media (min-width: ${breakpoints.sm}) {
          max-width: ${mobile};
        }
      `}
      ${tablet &&
        `
        @media (min-width: ${breakpoints.md}) {
          max-width: ${tablet};
        }
      `}
      ${desktop &&
        `
        @media (min-width: ${breakpoints.lg}) {
          max-width: ${desktop};
        }
      `}
      ${xl &&
        `
        @media (min-width: ${breakpoints.xl}) {
          max-width: ${xl};
        }
      `}
    `;
  }};
`;

export const CarouselContainer = styled.div`
  width: 100%;
`;

export const CarouselWrapper = styled.div`
  position: relative;
  width: 100%;
`;

export const CarouselContent = styled.div`
  overflow: hidden;
`;

export const CardsRow = styled.div`
  display: flex;
  gap: 20px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  align-items: stretch;

  &::-webkit-scrollbar {
    display: none;
  }

  &:active {
    cursor: grabbing;
  }
`;

export const PageControl = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: ${colors.white};
`;

export const NavigationArrowButton = styled.button<{
  direction: 'left' | 'right';
  disabled?: boolean;
}>`
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  ${({ direction }) =>
    direction === 'left' ? 'left: -68px;' : 'right: -68px;'} z-index: 10;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: ${({ disabled }) => (disabled ? '#CCCCCC' : colors.primary)};
  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};

  svg {
    width: 24px;
    height: 24px;
  }

  svg path {
    stroke: ${colors.white};
  }

  &:hover:not(:disabled) {
    background: #004a6e;
  }

  @media (min-width: ${breakpoints.lg}) {
    display: flex;
  }
`;

export const PageDotButton = styled.button<{ active: boolean }>`
  width: 8px;
  height: 8px;
  border-radius: 1000px;
  border: none;
  padding: 0;
  background: ${({ active }) => (active ? '#01000D' : '#AAAAAA')};
  cursor: pointer;
  transition: background 0.2s ease;

  &:hover {
    background: #01000d;
  }
`;