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 PropertyListItem({
  id,
  image,
  title,
  category,
  status,
  update,
  favorite,
  statistics,
  onFavorite,
  onDelete,
}) {
  return (
    <article className="flex w-full p-20 rounded-20 bg-white shadow-light overflow-hidden">
      <img
        src={image}
        alt={title}
        className="w-[80px] h-[80px] mr-[15px] rounded-3xl object-cover"
      />

      <div className="mr-20">
        <div className="flex justify-start gap-60 mb-[22px]">
          <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>
        <Typography variant="h3" className="max-w-[480px] text-3xl font-semibold truncate">
          {title}
        </Typography>
      </div>

      <div className="grow flex mr-20">
        {statistics.map(
          ({ subject, value, mode }, idx) =>
            (idx === 0 || idx === 1) && (
              <StatisticsValue
                key={subject + value + idx}
                subject={subject}
                value={value}
                mode={mode}
                className="-my-[6px]"
              />
            )
        )}
      </div>

      <div className="flex flex-col justify-between gap-16">
        <button
          className="self-end flex justify-center items-center gap-10 cursor-pointer"
          type="button"
          onClick={() => onDelete(id)}
        >
          <FuseSvgIcon className="text-common-secondary">heroicons-outline:trash</FuseSvgIcon>
        </button>
        <Link
          className="flex justify-center items-center px-[53px] py-20 -mr-20 -mb-20 text-lg font-semibold text-secondary-main border-l-1 border-t-1 rounded-tl-[20px] border-common-disabled cursor-pointer"
          to={`/property/${id}`}
        >
          Details
        </Link>
      </div>
    </article>
  );
}

export default memo(PropertyListItem);
