import * as React from 'react';

import { cn } from '@workspace/ui/lib/utils';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui/card';

// Define the type for a single feature item
interface FeatureItem {
  icon: React.ReactNode; // Icon component (e.g., from Lucide)
  title: string;
  description: string;
}

// Props for the FeatureGrid component
export interface FeatureGridProps extends React.HTMLAttributes<HTMLDivElement> {
  features: FeatureItem[];
  title?: string; // Optional title for the section
  columns?: {
    initial?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
}

export function FeatureGrid({
  features,
  title,
  columns = { initial: 1, sm: 2, md: 3 },
  className,
  ...props
}: FeatureGridProps) {
  // Helper function to build Tailwind grid column classes
  const getColumnClasses = () => {
    const classes = [];
    if (columns.initial) classes.push(`grid-cols-${columns.initial}`);
    if (columns.sm) classes.push(`sm:grid-cols-${columns.sm}`);
    if (columns.md) classes.push(`md:grid-cols-${columns.md}`);
    if (columns.lg) classes.push(`lg:grid-cols-${columns.lg}`);
    if (columns.xl) classes.push(`xl:grid-cols-${columns.xl}`);
    return classes.join(' ');
  };

  return (
    <div className={cn("w-full", className)} {...props}>
      {title && <h2 className="text-2xl font-bold mb-8">{title}</h2>}
      <div className={cn("grid gap-6", getColumnClasses())}>
        {features.map((feature, index) => (
          <Card key={index} className="flex flex-col">
            <CardHeader>
              <div className="mb-2 text-primary">
                {feature.icon}
              </div>
              <CardTitle>{feature.title}</CardTitle>
            </CardHeader>
            <CardContent className="flex-grow">
              <CardDescription>{feature.description}</CardDescription>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}