import React from 'react'
import { Pencil } from 'lucide-react'
import type { PromptProfile } from '../types'

export interface ProfileListProps {
  profiles: PromptProfile[]
  selectedProfile: string | null
  onSelect: (name: string) => void
}

export const ProfileList: React.FC<ProfileListProps> = ({ profiles, selectedProfile, onSelect }) => {
  return (
    <div className="grid grid-cols-3 gap-4">
      {profiles.map((profile) => {
        const isActive = profile.is_active
        const isSelected = selectedProfile === profile.name

        return (
          <div
            key={profile.name}
            className={`bg-white rounded-lg border p-4 transition-all ${
              isSelected
                ? 'border-blue-500 shadow-md ring-1 ring-blue-500'
                : isActive
                  ? 'border-blue-300 shadow-sm'
                  : 'border-gray-200 shadow-sm'
            }`}
          >
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <span
                  className={`inline-block w-2.5 h-2.5 rounded-full ${
                    isActive ? 'bg-green-500' : 'bg-gray-300'
                  }`}
                  title={isActive ? 'Active' : 'Inactive'}
                />
                <span className="font-semibold text-gray-900">Profile {profile.name}</span>
              </div>
              {isActive && (
                <span className="text-xs font-medium text-green-700 bg-green-50 px-2 py-0.5 rounded-full">
                  Active
                </span>
              )}
            </div>

            <button
              type="button"
              onClick={() => onSelect(profile.name)}
              className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded text-sm font-medium transition-all ${
                isSelected
                  ? 'bg-blue-600 text-white hover:bg-blue-700'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              <Pencil className="w-3.5 h-3.5" />
              {isSelected ? 'Editing' : 'Edit'}
            </button>
          </div>
        )
      })}
    </div>
  )
}