import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
import Typography from '@mui/material/Typography';
import { memo } from 'react';
import { Link } from 'react-router-dom';
import DateMark from './DateMark';
import FavoriteButton from './FavoriteButton';
import MetaMark from './MetaMark';
import StatisticsValue from './StatisticsValue';

function PropertyGridCard({
  id,
  image,
  title,
  category,
  status,
  update,
  favorite,
  statistics,
  onFavorite,
  onDelete,
}) {
  return (
    <article className="w-[470px] px-20 pt-20 rounded-20 bg-white shadow-light overflow-hidden">
      <div className="flex justify-between mb-[25px]">
        <div className="flex gap-10">
          <MetaMark
            category={category}
            className="text-common-highlight1 border-common-highlight1"
          />
          <MetaMark status={status} className="text-common-highlight2 border-common-highlight2" />
        </div>
        <div className="flex gap-20">
          <FavoriteButton favorite={favorite} id={id} onClick={onFavorite} />
          <DateMark update={update} />
        </div>
      </div>

      <div className="flex flex-col items-start mb-[29px]">
        <Typography variant="h3" className="mb-[17px] text-3xl font-semibold">
          {title}
        </Typography>
        <img src={image} alt={title} className="w-full h-160 rounded-3xl object-cover" />
        <div className="grid grid-cols-2 justify-between w-full">
          {statistics.map(({ subject, value, mode }, idx) => (
            <StatisticsValue
              key={subject + value + idx}
              subject={subject}
              value={value}
              mode={mode}
            />
          ))}
        </div>
      </div>

      <div className="flex w-[calc(100%+40px)] -mx-20 border-t-1 border-common-disabled">
        <button
          className="flex justify-center items-center gap-10 w-full py-20 border-r-1 border-common-disabled cursor-pointer"
          type="button"
          onClick={() => onDelete(id)}
        >
          <FuseSvgIcon className="text-common-secondary">heroicons-outline:trash</FuseSvgIcon>
          <Typography variant="body1" className="text-common-secondary font-medium">
            Delete
          </Typography>
        </button>
        <Link
          className="flex justify-center items-center w-full py-[22px] text-lg font-semibold text-secondary-main border-l-1 border-white cursor-pointer"
          to={`/property/${id}`}
        >
          Details
        </Link>
      </div>
    </article>
  );
}

export default memo(PropertyGridCard);
