import { Button } from '@/components/ui/button';

export default function CourseCatDateChap({
  categories,
  uploadedDate,
  chaptersLength,
  className,
  isDashboard = false,
}: {
  categories: string[];
  uploadedDate: string;
  chaptersLength: number;
  className?: string;
  isDashboard?: boolean;
}) {
  return (
    <div className={`flex items-center space-x-2 ${className}`}>
      {/* {categories.map((category, index) => ( */}
        <Button
          // key={index}
          className={
            isDashboard
              ? categories[0] === 'active' ? 
              'bg-green-200 text-green-700 border-2 border-green-500 hover:bg-green-300' 
              : categories[0] === 'inactive' ?
              'bg-red-200 text-red-700 border-2 border-red-500 hover:bg-red-300'
              : 'bg-amber-200 text-amber-700 border-2 border-amber-500 hover:bg-amber-300'
              : 'text-category'
          }
          variant={!isDashboard ? 'category' : 'default'}
          size="sm"
        >
          {/* {category} */}
          {categories[0]}
        </Button>
      {/* ))} */}
      <div className="flex items-center space-x-1">
        <div className="h-2 w-2 bg-gray-400 rounded-full" />
        <p className="text-gray-400 text-sm">{uploadedDate}</p>
      </div>
      <div className="flex items-center space-x-1">
        <div className="h-2 w-2 bg-gray-400 rounded-full" />
        <p className="text-gray-400 text-sm">{chaptersLength} Chps</p>
      </div>
    </div>
  );
}