import React from 'react';

interface SpecificationProps {
  specs: Record<string, Record<string, string>> | string | null;
}

const Specification: React.FC<SpecificationProps> = ({ specs }) => {
  if (!specs || typeof specs === 'string') {
    return (
      <div className="bg-white p-6 md:p-10 rounded-lg shadow-md">
        <h2 className="text-2xl md:text-3xl font-bold text-gray-800 flex items-center gap-2 mb-6">
         Specification
        </h2>
        <p className="text-gray-600">
          {typeof specs === 'string' ? specs : 'No specifications available for this product.'}
        </p>
      </div>
    );
  }

  return (
    <div className="bg-white p-6 md:p-10 rounded-lg">
      <h2 className="text-2xl md:text-3xl font-bold text-gray-800 flex items-center gap-2 mb-6">
        Specification
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-gray-800">
        {Object.entries(specs).map(([group, details]) => (
          <div key={group}>
            <h4 className="text-lg font-semibold text-gray-800 mb-2 capitalize">
              {group}
            </h4>
            <ul className="list-disc ml-5 space-y-1 text-sm">
              {Object.entries(details).map(([key, val]) => (
                <li key={key}>
                  <span className="font-medium">{key}</span>: {val}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Specification;