aplp.frontend.lms/src/pages/Course/CourseDetails.jsx

import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';
import { Label } from '../../components/ui/label';
import { Input } from '../../components/ui/input';
import { Textarea } from '../../components/ui/textarea';
import PageHeader from '../../components/PageHeader';
import { useParams } from 'react-router-dom';

const data = [
  {
    code: 'LDR-101',
    title: 'Foundations of Modern Leadership',
    description:
      'An introductory course covering essential leadership principles for new managers.',
    status: 'Active',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80'
  },
  {
    code: 'TEC-204',
    title: 'Advanced Cloud Architecture Patterns',
    description:
      'Deep dive into scalable cloud infrastructure design and implementation strategies.',
    status: 'Inactive',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?auto=format&fit=crop&w=800&q=80'
  },
  {
    code: 'CMP-099',
    title: '2022 Annual Compliance Review',
    description: 'Outdated compliance materials from the previous fiscal year.',
    status: 'Inactive',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80'
  }
];

function CourseDetail() {
  const { courseId } = useParams();
  const course = data.find((e) => e.code === courseId);

  if (!course) {
    return <div>Course not found</div>;
  }
  return (
    <>
      <PageHeader />
      <div className="mb-4 flex flex-row items-center justify-between">
        <h2 className="text-xl font-bold text-app-text">{course?.title}</h2>
        <div className="flex flex-row items-center gap-2">
          <Button
            color="gray"
            className="rounded-xl bg-app-surface-muted text-app-text hover:bg-app-interactive-hover"
          >
            Inactivate
          </Button>
          <Button className="rounded-xl bg-app-primary text-white hover:bg-app-primary-dark">
            Publish
          </Button>
        </div>
      </div>
      <div>
        <Card
          className="w-full max-w-100 overflow-hidden rounded-xl border border-app-border bg-white"
          style={{ boxShadow: 'rgba(0,0,0,0.03) 0px 4px 24px' }}
        >
          <div className="p-5">
            <h4 className="font-medium text-app-text">Course Details</h4>
          </div>
          <div className="px-5 pb-5">
            <div className="my-2 w-full max-w-64">
              <Label className="mb-1 block text-app-text">Course Code</Label>
              <Input
                value={course?.code}
                readOnly
              />
            </div>
            <Label className="mb-1 block text-app-text">Status</Label>
            {course?.status === 'Active' ? (
              <Badge className="rounded-[6px] bg-app-success text-app-success-text">
                Active
              </Badge>
            ) : (
              <Badge className="rounded-[8px] bg-app-neutral-badge text-app-neutral-badge-text">
                Inactive
              </Badge>
            )}
            <div className="my-2 w-full max-w-64">
              <Label className="mb-1 block text-app-text">Description</Label>
              <Textarea
                className="max-h-50"
                placeholder="..."
                rows={4}
                value={course?.description}
                readOnly
              />
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

export default CourseDetail;