import { useNavigate } from 'react-router';
import { useTranslation } from 'react-i18next';
import type { Apartment } from '@house-plan-maker/shared';
import { Card, CardHeader, CardBody } from '../ui/Card';
import { Button } from '../ui/Button';
import styles from './apartment-card.module.css';

interface ApartmentCardProps {
  apartment: Apartment;
  roomCount: number;
  onEdit: (apartment: Apartment) => void;
  onDelete: (apartment: Apartment) => void;
}

export function ApartmentCard({
  apartment,
  roomCount,
  onEdit,
  onDelete,
}: ApartmentCardProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(`/apartments/${apartment.id}`);
  };

  const handleEdit = (event: React.MouseEvent) => {
    event.stopPropagation();
    onEdit(apartment);
  };

  const handleDelete = (event: React.MouseEvent) => {
    event.stopPropagation();
    onDelete(apartment);
  };

  return (
    <Card interactive className={styles.card} onClick={handleClick}>
      <CardHeader>
        <div>
          <h3 className={styles.name}>{apartment.name}</h3>
          {apartment.address && (
            <p className={styles.address}>{apartment.address}</p>
          )}
        </div>
        <div className={styles.actions}>
          <Button variant="ghost" size="sm" onClick={handleEdit} aria-label={t('apartmentCard.edit')}>
            {t('apartmentCard.edit')}
          </Button>
          <Button variant="ghost" size="sm" onClick={handleDelete} aria-label={t('apartmentCard.delete')}>
            {t('apartmentCard.delete')}
          </Button>
        </div>
      </CardHeader>
      <CardBody>
        <div className={styles.meta}>
          {apartment.totalArea != null && (
            <span className={styles.metaItem}>
              <span className={styles.metaLabel}>{t('apartmentCard.area')}</span>
              {apartment.totalArea} m&sup2;
            </span>
          )}
          <span className={styles.metaItem}>
            <span className={styles.metaLabel}>{t('apartmentCard.rooms')}</span>
            {roomCount}
          </span>
        </div>
      </CardBody>
    </Card>
  );
}
