Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';
import IconButton from '@mui/material/IconButton';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import { Typography } from '@mui/material';
import { CapsuleItem } from './CapsuleItem';

const StyledSlider = styled(Slider)`
  display: grid;
  column-gap: 10px;
  grid-template-rows: 2rem auto;
  grid-template-columns: 1fr 30px 30px;

  .slick-list {
    grid-row: 2/3;
    grid-column: 1/4;
    padding: 1.5rem 0 0;
  }
  .slick-track {
    display: flex;
    gap: 1rem;
  }
`;

const ArrowButton = styled(IconButton)`
  border: 1px solid var(--font-color) !important;
  color: var(--font-color) !important;
  grid-row: 1;
  transition: all 200ms ease;

  &:hover {
    background-color: var(--font-color) !important;
    color: var(--bg-color) !important;
  }
`;

const StyledNextArrow = styled(ArrowButton)`
  grid-column: 3;
`;

const StyledPrevArrow = styled(ArrowButton)`
  grid-column: 2;
`;

const NextArrow = ({ onClick }) => {
  return (
    <StyledNextArrow onClick={onClick}>
      <NavigateNextIcon />
    </StyledNextArrow>
  );
};

const PrevArrow = ({ onClick }) => {
  return (
    <StyledPrevArrow onClick={onClick}>
      <NavigateBeforeIcon />
    </StyledPrevArrow>
  );
};

export function CapsulesList({ capsules = [], onEnroll = () => {} }) {
  const settings = {
    infinite: true,
    speed: 1500,
    slidesToShow: capsules?.length < 4 ? capsules?.length : 4,
    slidesToScroll: capsules?.length < 4 ? capsules?.length : 4,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 0
        }
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          initialSlide: 0
        }
      }
    ]
  };

  if (!capsules || !capsules.length) {
    return <Typography>No hay cápsulas disponibles</Typography>;
  }

  return (
    <StyledSlider {...settings}>
      {capsules?.map((capsule, index) => (
        <CapsuleItem capsule={capsule} onComplete={onEnroll} key={index} />
      ))}
    </StyledSlider>
  );
}