import React from 'react'
import { Link } from '@inertiajs/inertia-react'
import { Card, Grid, Text } from "@nextui-org/react";

const SingleCollection = ({slug, photo, title}) => {
  return (
    <Grid xs={12} sm={3} >
        <Link style={{ width: '100%' }} href={route('collection', slug)}>
          <Card isPressable isHoverable >
              <Card.Body css={{ p: 0 }}>
                  <Card.Image
                  src={photo}
                  objectFit="fill"
                  width="100%"
                  height={300}
                  alt={title}
                  />
              </Card.Body>
              <Card.Footer css={{ textAlign: "center", justifyContent: "center" }}>
                  <Text b>{title}</Text>
              </Card.Footer>
          </Card>
        </Link>
    </Grid>
  )
}

export default SingleCollection