import { Badge, Button, Card, Center, Divider, Group, Image, Text } from '@mantine/core';
import { useState } from 'react';

const CosmeticProductCard = ({ products, title }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const product = products[currentIndex];

  const handlePrev = () => {
    setCurrentIndex((prev) => (prev === 0 ? products.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex((prev) => (prev === products.length - 1 ? 0 : prev + 1));
  };

  return (
    <Card shadow="sm" padding="lg" radius="md" withBorder>
    

      <Text ta="center" fw={500}>{title}</Text>
      <Divider pb={2} />

      <Card.Section>
        <Image
          src={`../../Images/Products/${product.img}`}
          height={160}
          fit="contain"
          />
      </Card.Section>

      <Text ta="center" size="sm" c="dimmed">
        {product.name}
      </Text>

      <a href={product.link} target="_blank" rel="noopener noreferrer">
        <Button pb={2} color="blue" fullWidth mt="md" radius="md">
          Buy Now
        </Button>
      </a>
    <Center>
      <Group mt="md" position="center">
        <Button variant="light" onClick={handlePrev}>←</Button>
        <Text size="sm">{currentIndex + 1} / {products.length}</Text>
        <Button variant="light" onClick={handleNext}>→</Button>
      </Group>
          </Center>
    </Card>
  );
};

export default CosmeticProductCard;
