import React from 'react';
import {
  Card,
  CardContent,
  Typography,
  List,
  ListItem,
  ListItemText,
  Divider,
} from '@mui/material';
import { OpenHouseAPI } from 'types';
import { format } from 'date-fns';

interface OpenHouseCardProps {
  openHouses: OpenHouseAPI[] | undefined;
}

const OpenHouseCard: React.FC<OpenHouseCardProps> = ({ openHouses }) => {
  if (openHouses) {
    return (
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Open House Information
          </Typography>
          {openHouses.length > 0 ? (
            <List dense>
              {openHouses.map((openHouse, index) => (
                <React.Fragment key={index}>
                  <ListItem>
                    <ListItemText
                      primary={`${format(new Date(openHouse.listed_date), 'MMM d, yyyy')} at ${format(
                        new Date(`1970-01-01T${openHouse.start_time}`),
                        'h a',
                      )} - ${format(new Date(`1970-01-01T${openHouse.end_time}`), 'h a')}`}
                    />
                  </ListItem>
                  {index < openHouses.length - 1 && <Divider component="li" />}
                </React.Fragment>
              ))}
            </List>
          ) : (
            <Typography variant="body2" color="text.secondary">
              No upcoming open houses scheduled.
            </Typography>
          )}
        </CardContent>
      </Card>
    );
  } else {
    return (
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Open House Information
          </Typography>
          <Typography variant="body2" color="text.secondary">
            No upcoming open houses scheduled.
          </Typography>
        </CardContent>
      </Card>
    );
  }
};

export default OpenHouseCard;
