// a card item represent a news in newsSection
import { Button, Card } from "react-bootstrap";

export default function StoreItem({ storeName, address, imageSrc, storeHref = null, deleteable = false, delButtonCallback = null }) {
  return (
    <Card
      as={storeHref ? 'a' : undefined}
      href={storeHref ? storeHref : undefined}
      style={{ height: "200px" }}
    >
      <Card.Img 
        variant="top" 
        src={imageSrc} 
        style={{ height: "200px", objectFit: 'cover', position: 'center', borderRadius: '10px' }} />
      <Card.ImgOverlay
        className="text-start"
        style={{ 
          backgroundImage: 'linear-gradient(rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0.5))',
          // position: 'relative',
          borderRadius: '10px'
        }}
        >
        <Card.Title>{storeName}</Card.Title>
        <Card.Text style={{fontWeight:'bold'}}>
          {address}
        </Card.Text>
        {deleteable ? (
          <div className="d-flex justify-content-end pb-3">
            <Button size='sm' onClick={delButtonCallback} variant='danger'
            style={{ 
              position: 'absolute', 
              bottom: '20px',  // Khoảng cách từ dưới lên
              right: '20px'    // Khoảng cách từ phải qua
            }}>
              Xóa
            </Button>
          </div>
        ) : (<></>)}
      </Card.ImgOverlay>
    </Card>
  );
}