import type { JSX } from 'react';
import { ICondition } from '../lib/data';

interface IConditionCardProps {
  item: ICondition;
}

const ConditionCard = ({ item }: IConditionCardProps): JSX.Element => {
  return (
    <div className="flex flex-col relative items-center border p-4 bg-white h-full justify-between rounded-lg shadow-md">
      <img
        src={item.coverImage}
        alt={item.title}
        className="w-full h-40 object-contain scale-[0.60]"
      />
      <h5 className="text-lg font-bold text-accent text-center mb-2">
        {item.title}
      </h5>
      <p className="text-sm text-muted text-center">{item.description}</p>
      <div className="absolute top-[-7px] right-[-10px] w-[50px] h-[50px] font-caveat rounded-full flex justify-center items-center font-extrabold bg-secondary text-white shadow text-[30px] pr-[10px]">
        {item.id}
      </div>
    </div>
  );
};

export default ConditionCard;
