import React from 'react';
import { LucideIcon } from 'lucide-react';

interface StatusCardProps {
  title: string;
  value: number | string;
  icon: LucideIcon;
  bgColor: string;
  textColor: string;
}

const StatusCard = React.memo<StatusCardProps>(({
  title,
  value,
  icon: Icon,
  bgColor,
  textColor,
}) => (
  <div className="relative overflow-hidden rounded-2xl border bg-white p-4 shadow-sm hover:shadow-md transition">
    <div className={`absolute left-0 top-0 h-full w-1 ${bgColor}`} />

    <div className="flex items-center gap-5">
      <div
        className={`flex-shrink-0 flex h-14 w-14 items-center justify-center rounded-2xl ${bgColor} ${textColor}`}
      >
        <Icon size={22} strokeWidth={2.5} />
      </div>

      <div>
        <p className="text-sm text-gray-500">{title}</p>
        <h4 className="text-2xl font-bold text-gray-900">{value}</h4>
      </div>
    </div>
  </div>
));

StatusCard.displayName = 'StatusCard';

export default StatusCard;