import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { TestimonialProps } from '../../types';
import { Star, Quote } from 'lucide-react';
import { imagePickerField } from '../../fields/ImagePickerField';

export const Testimonial: ComponentConfig<TestimonialProps> = {
  label: 'Testimonial',
  fields: {
    quote: {
      type: 'textarea',
      label: 'Quote',
    },
    author: {
      type: 'text',
      label: 'Author Name',
    },
    title: {
      type: 'text',
      label: 'Author Title/Company',
    },
    avatar: {
      ...imagePickerField,
      label: 'Avatar Image',
    },
    rating: {
      type: 'select',
      options: [
        { label: '5 Stars', value: 5 },
        { label: '4 Stars', value: 4 },
        { label: '3 Stars', value: 3 },
        { label: '2 Stars', value: 2 },
        { label: '1 Star', value: 1 },
      ],
    },
  },
  defaultProps: {
    quote: 'This service has been amazing. I highly recommend it to everyone!',
    author: 'John Doe',
    title: 'Happy Customer',
    rating: 5,
  },
  render: ({ quote, author, title, avatar, rating }) => {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 sm:p-8">
        {/* Quote Icon */}
        <Quote className="w-10 h-10 text-indigo-200 dark:text-indigo-800 mb-4" />

        {/* Stars */}
        {rating && (
          <div className="flex gap-1 mb-4">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                className={`w-5 h-5 ${
                  i < rating
                    ? 'text-yellow-400 fill-yellow-400'
                    : 'text-gray-300 dark:text-gray-600'
                }`}
              />
            ))}
          </div>
        )}

        {/* Quote Text */}
        <blockquote className="text-lg text-gray-700 dark:text-gray-300 mb-6 italic">
          "{quote}"
        </blockquote>

        {/* Author */}
        <div className="flex items-center gap-4">
          {avatar ? (
            <img
              src={avatar}
              alt={author}
              className="w-12 h-12 rounded-full object-cover"
            />
          ) : (
            <div className="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
              <span className="text-indigo-600 dark:text-indigo-400 font-semibold text-lg">
                {author.charAt(0).toUpperCase()}
              </span>
            </div>
          )}
          <div>
            <p className="font-semibold text-gray-900 dark:text-white">{author}</p>
            {title && (
              <p className="text-sm text-gray-600 dark:text-gray-400">{title}</p>
            )}
          </div>
        </div>
      </div>
    );
  },
};

export default Testimonial;
