import React from 'react';

const DemoCard = ({
  icon,
  sector,
  item,
  type,
}: {
  icon: React.ReactElement<{ className?: string }>;
  sector: string;
  item: string;
  type: 'Offer' | 'Need';
}) => (
  <div className="relative w-full sm:w-5/12 p-6 rounded-xl bg-card border shadow-md text-center">
    <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-semibold rounded-full">
      {type}
    </div>
    <div className="h-16 w-16 mb-4 mx-auto rounded-full flex items-center justify-center bg-muted">
      {React.cloneElement(icon, { className: 'h-8 w-8 text-primary' })}
    </div>
    <p className="font-semibold text-lg">{item}</p>
    <p className="text-sm text-muted-foreground">{sector}</p>
  </div>
);

export default React.memo(DemoCard);